개요

• API를 요청하고 응답받는 행위는 모두 비동기로 이루어짐
• 비동기 처리를 다룰 때는 다음과 같은 사항을 고려해야 함.
  • 현재 비동기 동작이 어떤 상태인가?
  • 비동기 동작을 위해 필요한 정보가 무엇인가?
  • 요청이 성공했다면 받아온 정보를 어떻게 저장하고 관리할 것인가?
  • 요청이 실패했다면 실패에 대한 정보를 어떻게 확인할 것인가?
  • 비동기 요청에 대한 코드를 쉽게 유지보수할 수 있도록 어떻게 구조화하고 관리할 것인가?

7.1 API 요청

1. fetch로 API 요청하기

고려해야할 점

• URL변경
• 여러 서버에 API를 요청할 때 타임아웃 설정
• 모든 요청에 커스텀 헤더

등등 API 요청 정책 추가될 때마다 계속 비동기 호출 코드를 수정해야하는 번거로움이 존재함.

2. 서비스 레이어로 분리하기

• 비동기 호출 코드는 컴포넌트 영여겡서 분리되어 다른 영억 (서비스 레이어)에서 처리되어야함.
  • fetch함수를 호출하는 부분이 서비스 레이어로 이동
  • 컴포넌트는 서비스 레이어의 비동기 함수를 호출하여 그 결과를 받아와 렌더링하는 흐름

3. Axios 활용하기

• fetch는 내장 라이브러리이기 때문에 임포트하거나 설치할 필요 X
  • but) 많은 기능을 사용하려면 직접 구현해서 사용해야함
    • 그로인해 Axios 라이브러리를 사용함

import axios, { AxiosInstance, AxiosPromise } from "axios";

const defaultConfig = {
    timeout:5000
}
const apiRequester: AxiosInstance = axios.create(defaultConfig);

const orderApiRequester: AxiosInstance = axios.create({
    baseURL: "<https://api.baemin.or/>",
    ...defaultConfig
})

const orderCartApirequester: AxiosInstance = axios.create({
    baseURL: "<https://cart.baemin.order/>",
    ...defaultConfig
})

위와 같은 방법으로 API Entry가 2개 이상일 경우 인스턴스르 ㄹ따로 두어 가능