axios 환경 설정해주기

Graph QL을 먼저 배워서인지 Rest API는 할 때마다 어려운 느낌이 든다
(Next.js를 배우고 CRA 사용, Graph QL을 배우고 Rest API 사용... 뭔가 반대로 된 느낌)

이전에 Rest API를 살펴본 글에서 언급한 것처럼 axios를 사용할 수 있으나, 요청을 할 때마다 url을 작성해야 하는 번거로움 + 복잡함이 존재한다.
이를 보다 편리하고 간단하게 모듈화하여 활용할 수 있는 방법을 정리해보고자 한다.

📌 axios instance 정의하기

src > api > instance.tsx

import axios from 'axios';

// instance 설정
export const instance = axios.create({
  baseURL: "api 주소",
  headers: {}
});

instance.interceptors.response.use(
  (response: any) => {
    if(response.status === 200) return response;
  },
  (error) => {console.log(error);}
);

instance.interceptors?

: then이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있다.

• instance.interceptors.request.use : 요청 인터셉터 추가

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행할 일
    // ...
    return Promise.reject(error);
  }
);

• instance.interceptors.response.use : 응답 인터셉터 추가

instance.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  }
);

baseURL에 들어가는 API 주소의 경우, 외부 노출을 막기 위해 .env 파일에 작성하여 import 하는 방식으로 사용하는 것이 좋다.

• .env 파일
  변수명은 반드시 REACTAPP으로 시작돼야 한다.

REACT_APP_지정할 변수 = 값

• .env파일 내 주소 불러오기

export const instance = axios.create({
  baseURL: process.env.REACT_APP_지정한 변수,
  headers: {}
});

📌 instance 활용하여 fetch 해오기

instance를 import한 후, baseURL 뒤에 이어지는 endpoint, 파라미터값 혹은 쿼리 스트링을 이어서 작성해주면 된다.

import { instance } from "../../api/instance";

const getContentList = async() => {
  const response = await instance.get(
    `/app/list/content/live/${contentInfo.roundID}/expo/desc`
  );
  const data = response.data;
  if (data.message === 'success') return data.data[0];
};

<참고 : https://yamoo9.github.io/axios/guide/interceptors.html >