Axios를 활용한 API 요청 모듈화 | Axios 기반의 API 유틸리티

요청 인터셉터

이 부분은 요청이 보내지기 전에 실행된다.
주로 사용자의 인증 토큰을 관리하고 해당 토큰을 요청 헤더에 추가하는 용도로 사용된다.
로컬 스토리지에서 토큰을 가져와 요청 헤더에 첨부하여 API 요청마다 해야하는 토큰 설정 작업의 번거로움을 줄였다.

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('Authorization');
    if (token) {
      config.headers['Authorization'] = `${token}`;
    }
    config.withCredentials = true;
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

---

응답 인터셉터

응답이 도착하기 전에 실행한다.
응답의 상태 코드를 확인하고 특정 에러 코드에 대한 처리를 수행할 수 있는데.. 아직 이부분은 잘 몰라서 응답을 그대로 반환하고 있다.

axios.interceptors.response.use(
  async response => {
    return response;
  },
  async error => {
    return Promise.reject(error);
  },
);

요청 인터셉터와 응답 인터셉터를 사용하는 이유

• 중복 제거: 각 API 요청마다 반복적으로 해야하는 작업(예: 토큰 설정)을 중앙에서 한 번에 처리할 수 있다.
• 통일된 에러 핸들링: 응답 인터셉터에서 에러를 감지하고 일관된 방법으로 처리할 수 있다.
• 전처리 및 후처리: 요청을 보내기 전의 데이터 전처리나, 응답을 받은 후의 데이터 후처리를 쉽게 할 수 있다.
• 인증 관리: 요청 인터셉터에서 모든 요청에 토큰을 첨부하거나, 응답 인터셉터에서 토큰 만료를 감지하고 자동으로 재로그인을 할 수 있다.

---

API 함수들

기본적인 HTTP 요청 메서드들(POST, PUT, GET, DELETE, PATCH)에 대한 함수를 정의한다.
각 함수는 API 엔드포인트(URL), 데이터 또는 설정을 매개변수로 받아 처리하고, 응답을 반환한다.

• postAPI
  HTTP POST 메소드를 사용하여 API에 데이터를 보낸다.
  
  ▶️ 매개변수
  • url : 요청할 API의 엔드포인트
  • data : API에 보낼 데이터
  ▶️ 제네릭 타입
  • T : 보낼 데이터의 타입 (기본값은 unknown).
  • R : 응답으로 받을 데이터의 타입 (기본값은 unknown).
  ▶️ 반환 타입
  • Promise<AxiosResponse<R>> : R 타입의 데이터를 포함하는 응답을 반환하는 Promise.

export const postAPI = <T = unknown, R = unknown>(
  url: string,
  data: T,
): Promise<AxiosResponse<R>> => {
  // console.log("요청보내고 있음")
  return axios.post<R>(API_BASE_URL + url, data);
};

• putAPI:
  HTTP PUT 메소드를 사용하여 API에 데이터를 업데이트 한다.
  구조와 로직은 postAPI와 매우 유사, 데이터 업데이트에 사용

export const putAPI = <T = unknown, R = unknown>(
  url: string,
  data: T,
): Promise<AxiosResponse<R>> => {
  return axios.put<R>(API_BASE_URL + url, data);
};

• getAPI:
  HTTP GET 메소드를 사용하여 API로부터 데이터를 가져온다.
  config는 선택적 매개변수로, 요청에 대한 추가 설정(예: 헤더)을 포함할 수 있다.

export const getAPI = <R = unknown>(
  url: string,
  config?: AxiosRequestConfig,
): Promise<AxiosResponse<R>> => {
  return axios.get<R>(API_BASE_URL + url, config);
};

• deleteAPI:
  HTTP DELETE 메소드를 사용하여 API에서 특정 데이터를 삭제한다.
  config는 선택적 매개변수로, 요청에 대한 추가 설정(예: 헤더)을 포함할 수 있다.

export const deleteAPI = <R = unknown>(
  url: string,
  config?: AxiosRequestConfig,
): Promise<AxiosResponse<R>> => {
  return axios.delete<R>(API_BASE_URL + url, config);
};

• patchAPI:
  HTTP PATCH 메소드를 사용하여 API의 특정 부분 데이터를 업데이트 한다.
  구조와 로직은 postAPI와 유사하지만, 일부 데이터만 변경할 때 사용된다.

export const patchAPI = <T = unknown, R = unknown>(
  url: string,
  data: T,
): Promise<AxiosResponse<R>> => {
  return axios.patch<R>(API_BASE_URL + url, data);
};

---

모든 함수는 API의 기본 URL(API_BASE_URL)을 사용하여 전체 엔드포인트 URL을 생성한다. 이를 통해 여러 다른 엔드포인트에 동일한 기본 URL을 재사용할 수 있다.

이러한 유틸리티 함수들은 웹 애플리케이션에서 API와의 통신을 간소화하고 코드의 중복을 줄이는 데 도움을 준다.