[javascript] Angular에서의 자바스크립트 비동기 제어 방법

21 Dec 2023

javascript

Angular 애플리케이션을 개발하다보면 데이터를 가져오거나 HTTP 요청을 보내는 등 비동기 작업을 수행해야 하는 경우가 있습니다. 이러한 비동기 작업을 효과적으로 제어하고 처리하기 위해서 Angular에서는 다양한 방법을 제공합니다. 이번 포스트에서는 Angular에서의 자바스크립트 비동기 제어 방법에 대해 알아보겠습니다.

1. Promise 활용

Promise는 ES6부터 도입된 비동기 처리를 위한 객체로, 주로 HTTP 요청이나 타이머 함수 등에서 사용됩니다. Angular에서는 HTTP 모듈을 사용할 때 Promise를 활용하여 비동기 작업을 처리할 수 있습니다. 예를 들어, HTTP GET 요청을 보내고 응답을 받아오는 코드는 다음과 같이 작성할 수 있습니다:

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

this.http.get('https://api.example.com/data')
    .toPromise()
    .then(response => {
        // 응답 데이터를 처리하는 코드
    })
    .catch(error => {
        // 에러 처리 코드
    });

2. RxJS Observables 활용

RxJS는 Reactive Extensions for JavaScript의 약자로, Angular에서 이벤트 스트림과 관련된 작업을 쉽게 다룰 수 있도록 도와주는 라이브러리입니다. Angular에서는 RxJS의 Observable을 활용하여 비동기 데이터 스트림을 다룰 수 있습니다. 예를 들어, HTTP 요청을 Observable로 처리하는 코드는 다음과 같이 작성할 수 있습니다:

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

this.http.get('https://api.example.com/data')
    .subscribe(
        data => {
            // 데이터를 처리하는 코드
        },
        error => {
            // 에러 처리 코드
        }
    );

3. Async/Await 활용

ES8부터 도입된 Async/Await은 Promise를 더 쉽게 다룰 수 있도록 해주는 기능입니다. Angular에서도 Async/Await을 활용하여 비동기 작업을 처리할 수 있습니다. 예를 들어, HTTP 요청을 Async/Await으로 처리하는 코드는 다음과 같이 작성할 수 있습니다:

async getData() {
    try {
        const response = await this.http.get('https://api.example.com/data').toPromise();
        // 응답 데이터를 처리하는 코드
    } catch (error) {
        // 에러 처리 코드
    }
}

Angular에서는 이러한 방법들을 통해 자바스크립트 비동기 작업을 효과적으로 제어하고 처리할 수 있습니다. 각 방법마다 장단점이 있으니 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.

참고 자료: