[javascript] Angular에서의 자바스크립트 프로미스(Promise) 사용 방법

21 Dec 2023

javascript

Angular 프레임워크를 사용하면서 비동기 작업을 수행해야 할 때 자바스크립트 프로미스(Promise)를 사용하면 코드를 효율적으로 관리할 수 있습니다.

이 글에서는 Angular 애플리케이션에서 자바스크립트 프로미스를 사용하는 방법에 대해 알아보겠습니다.

1. 자바스크립트 프로미스(Promise)란?

자바스크립트 프로미스는 비동기 작업의 결과를 나타내는 객체로, 성공 또는 실패와 같은 상태를 가지고 있습니다. 이를 통해 비동기 코드를 더 쉽게 관리할 수 있습니다.

2. Angular에서의 자바스크립트 프로미스 사용 방법

Angular에서는 HttpClient를 사용하여 HTTP 요청을 보내는 경우에 자바스크립트 프로미스를 활용합니다. 아래는 간단한 예제 코드입니다.

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData(): Promise<any> {
  return new Promise((resolve, reject) => {
    this.http.get('https://example.com/api/data').subscribe(
      (response) => {
        resolve(response);
      },
      (error) => {
        reject(error);
      }
    );
  });
}

위의 코드에서 getData 메서드는 HttpClient를 사용하여 API에서 데이터를 가져오는 동작을 정의하고, 해당 동작을 프로미스로 감싸 반환합니다.

이제, getData 메서드를 호출하여 결과를 처리할 수 있습니다.

this.getData().then((data) => {
  // 성공적으로 데이터를 가져왔을 때 수행할 작업
}).catch((error) => {
  // 에러가 발생했을 때 처리할 작업
});

3. 결론

Angular에서는 자바스크립트 프로미스를 사용하여 비동기 작업을 보다 효과적으로 다룰 수 있습니다. 프로미스를 사용하면 코드를 간결하게 작성할 수 있고, 비동기 작업의 성공과 실패를 효율적으로 처리할 수 있습니다.

프로미스는 Angular 애플리케이션에서 HTTP 요청을 비롯한 다양한 비동기 작업을 다룰 때 매우 유용하며, 개발자들은 이를 통해 코드의 가독성과 관리성을 높일 수 있습니다.

참조:

Angular 공식 문서: https://angular.io/guide/http
MDN web docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise