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

21 Dec 2023

javascript

Angular 애플리케이션을 개발하는 동안, 자바스크립트의 비동기 처리는 매우 중요합니다. 비동기 처리를 올바르게 다루지 않으면 UI 동작이 지연되거나 서버에서 데이터를 가져오는 데 문제가 발생할 수 있습니다. Angular는 비동기 처리를 위한 다양한 방법을 제공합니다. 여기에는 Promise, Observable, 그리고 async/await 등이 포함됩니다.

Promise를 이용한 비동기 처리

Promise는 비동기 동작을 처리하는 가장 기본적인 방법 중 하나입니다. Promise는 비동기 작업이 완료되면 성공 또는 실패와 같은 결과를 반환합니다. Angular에서는 HTTP 요청을 보낼 때 주로 Promise를 사용하여 응답을 처리합니다.

아래는 Promise를 사용하여 HTTP 요청을 보내고 결과를 처리하는 간단한 예제입니다.

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

// HTTP 요청 보내기
this.http.get('https://example.com/api/data')
  .toPromise()
  .then(response => {
    // 성공적으로 데이터를 받았을 때 실행할 코드
  })
  .catch(error => {
    // 데이터를 받는 과정에서 에러가 발생했을 때 실행할 코드
  });

Observable을 이용한 비동기 처리

Observable은 Angular에서 많이 사용되는 또 다른 비동기 처리 방법입니다. Observable은 데이터 스트림을 생성하고, 여러 값 또는 이벤트를 발행할 수 있습니다. HTTP 요청의 응답을 처리할 때 Observable이 유용하게 활용됩니다.

아래는 Observable을 사용하여 HTTP 요청을 보내고 결과를 처리하는 예제입니다.

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

// HTTP 요청 보내기
this.http.get('https://example.com/api/data')
  .subscribe(
    response => {
      // 데이터를 받았을 때 실행할 코드
    },
    error => {
      // 에러가 발생했을 때 실행할 코드
    }
  );

async/await을 이용한 비동기 처리

async/await은 ECMAScript 2017(ES8)에서 소개된 비동기 처리 방식으로, Promise를 더 쉽게 다룰 수 있도록 도와줍니다. async 키워드를 사용하여 함수를 비동기 함수로 정의하고, await 키워드를 사용하여 Promise가 처리될 때까지 기다릴 수 있습니다.

아래는 async/await을 사용하여 HTTP 요청을 보내고 결과를 처리하는 예제입니다.

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

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

Angular에서 비동기 처리를 다루는 방법은 여러 가지가 있지만, Promise, Observable, 그리고 async/await을 올바르게 활용하면 성능적으로 우수한 코드를 작성할 수 있습니다. 선택한 방법은 프로젝트의 요구 사항과 개발자의 선호도에 따라 다를 수 있습니다.

이처럼 Angular에서의 자바스크립트 비동기 처리 방법에 대해 간략히 알아보았습니다.

참고 자료:

더 학습하려면 위의 링크를 확인해보세요.