[javascript] Angular에서의 자바스크립트 API 호출 방법

21 Dec 2023

javascript

Angular 애플리케이션에서 외부 자바스크립트 API를 호출하는 방법은 매우 중요합니다. API를 호출하여 데이터를 가져오거나 서비스와 상호 작용하는 애플리케이션을 개발하는 과정에서 Angular에서는 여러 가지 방법을 제공합니다.

1. HttpClient 모듈을 사용하여 API 호출

Angular에서 API를 호출하는 가장 흔한 방법은 HttpClient 모듈을 사용하는 것입니다. 이 모듈은 HTTP 요청을 생성하고 응답을 처리하는 기능을 제공합니다.

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getApiData() {
    return this.http.get('https://api.example.com/data');
  }
}

2. RxJS 옵저버블 활용

API 호출 후 응답을 비동기적으로 처리하려면 RxJS 옵저버블을 사용할 수 있습니다. 이를 활용하면 HTTP 요청을 보다 세밀하게 제어하고 응답을 쉽게 가공할 수 있습니다.

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getApiData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

3. JSONP 모듈을 사용한 JSONP 요청

서버에서 JSONP(JSON with Padding)를 지원하는 경우 HttpClientJsonpModule을 사용하여 JSONP 요청을 보낼 수 있습니다.

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getApiData() {
    return this.http.jsonp('https://api.example.com/data', 'callback');
  }
}

결론

Angular에서는 HttpClient 모듈과 RxJS를 활용하여 다양한 형태의 API 호출을 지원하고 있습니다. 적절한 방법을 선택하여 애플리케이션의 요구에 맞게 API를 효과적으로 호출할 수 있습니다.

참고자료:

Angular 공식 문서: https://angular.io/guide/http
RxJS 공식 문서: https://rxjs.dev/guide/overview