[Angular] cross-fetch 사용 방법

Angular 개발 시 api 통신을 하기 위한 Fetch API에 대해 알아보겠습니다.

Fetch API 란

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.

설치

Fetch API를 사용하기 위해 cross-fetch 패키지를 설치한다.

# npm 을 사용하여 설치하는 경우
npm install --save cross-fetch

# yarn 을 사용하여 설치하는 경우
yarn add cross-fetch

ApiService 구축

api는 전역에서 사용하는 것이기 때문에 service로 만든다.
src/app/services 폴더 아래에 api.service.ts 파일을 만들었다.

// src/app/services/api.service.ts
import { Injectable } from '@angular/core';

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

http 메서드 설정

HTTP 요청 메소드에서 자주 사용하는 GET, POST, PUT, DELETE 를 사용하는 함수를 생성한다.

import { Injectable } from '@angular/core';
import fetch from 'cross-fetch';

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

  public get(url: string): Promise<Response> {
    return this.fetch(url, {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
      },
    });
  }

  public post(url: string, payload: BodyInit): Promise<Response> {
    return this.fetch(url, {
      method: 'POST',
      body: payload,
      headers: {
        'Content-type': 'application/json',
      },
    });
  }

  public put(url: string, payload: BodyInit): Promise<Response> {
    return this.fetch(url, {
      method: 'PUT',
      body: payload,
      headers: {
        'Content-type': 'application/json',
      },
    });
  }

  public delete(url: string): Promise<Response> {
    return this.fetch(url, {
      method: 'DELETE',
      headers: {
        'Content-type': 'application/json',
      },
    });
  }
}

fetch의 return 타입은 Promise 이기 때문에 then 함수를 사용하거나 async await 를 사용한다.

// src/app/app.components.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from 'app/services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  private BASE_URL = 'https://webtoon-crawler.nomadcoders.workers.dev';

  constructor(private api: ApiService) {
    this.api.get(`${BASE_URL}/today`).then((response: any) => {
      if (response.ok) {
        console.log(response.json());
      }
    });
  }

  ngOnInit(): void {}
}

참고

• Fetch API 사용하기
• https://github.com/lquixada/cross-fetch