🕸️ axios interceptor 설정

[soryeongk]

axios 설정에 interceptors를 추가해 요청에 들어갈 header를 만들거나, 응답의 에러를 전역적으로 핸들링할 수 있습니다.
적용시 우려되는 점이나 궁금한 것이 있다면 comment 달아주세요! 아래는 이해를 돕기 위한 예시 코드입니다.

// api/index.js
function setHeader(config) {
  const accessToken = localStorage.getItem("token");
	if (!accessToken) {
		return handleError();
  }
  config.headers = { ...config, Authorization: accessToken };

	return config;
};

const api = axios.create({
	baseURL: "",
});

api.interceptors.request.use(config => setHeader(config), err => handleError(err));

const API = {};
API.getNoteList = () => api.get('/url');
API.editBlah = () => api.patch('/url2');

참고 문서(클릭)

[soryeongk]

📌 axios.interceptors.response 적용

적용될 코드는 아래와 같으며, axios 세팅관련 PR(#36 )이 머지될 때 적용될 예정입니다. 그 전까지 의견 전달주시면 반영하겠습니다 :))

const baseInstance = axios.create({
  baseURL: `${BASE_URL}`,
  headers: {
    "Content-Type": "application/json",
    Authorization: LocalStorage.getItem("booktez-token"),
  },
});

baseInstance.interceptors.response.use(
  (response) => {
    console.log("soryeongk axios response intercepted: ", response);

    return response.data;
  },
  (error) => {
    if (axios.isAxiosError(error)) {
      return error.response?.data;
    }
  },
);

요청에 대한 AxiosResponse를 보면, 아래와 같은 형태가 됩니다.

data 안에 서버에서 보내주는 data가 들어있는 구조인데, 우리 서버에서 각종 status, message 등을 이미 잘 정리해서 보내주고 있어 중복이 생깁니다. 이 때문에 응답에 대해서 매번 response.data.data....으로 사용하거나 {data: {data}} 의 형식으로 받곤 했는데, 너무 비효율적인 것 같아 모든 요청에 대해 interceptors가 response.data만 보내주도록 설정했습니다. 기존의 타입은 아래와 같습니다.

기존의 AxiosResponse Type

interface AxiosResponse<T = any, D = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: AxiosResponseHeaders;
  config: AxiosRequestConfig<D>;
  request?: any;
}

서버에서 기본적으로 보내주는 Response Type

interface Response<T> {
  data: T;
  message: string;
  status: number;
  success: boolean;
}

⚠️ 주의할 점

api 받는 방식이 변경되는 것이니 마이그레이션 코드를 그대로 받아와선 안됩니다.
data 한 뎁스가 사라지는 것에 유의하시고, 가장 좋은 것은 console을 찍고 확인하면서 직접 짜는 것!!!이 베스트입니다 :))
설~~~~마 그럴리 없겠지만, 그리고 지금까지도 그러지 않았다고 생각하지만, 이전 코드를 그대로 복붙하고 만족하는 것은 지양해주세요~
"지금까지의 모든 코드는 쓰레기다"라는 생각, 최소한 "더 나아질 가능성이 있다"라는 생각으로 멋진 코드를 짜보아용용구리

@joohaem @Gyuminn

[soryeongk]

📌 axios.interceptors.request 적용

모든 axios 요청에 대해서 기본적인 header를 설정해줍니다.
request.use에서 config를 받습니다. config는 AxiosRequestConfig 타입을 가지는데, 그 안에는 baseUrl, method, headers, params 등을 설정할 수 있습니다.
그 중에서 우리는 headers 세팅만 사용합니다.
localstorage의 token이 있다면 authorization에 담고, 그렇지 않다면 빈 string으로 담아 보냅니다.
다행히도 우리 서버에서는 토큰이 필요없는 요청에 대해서 authorization이 함께 넘어가도 문제가 없습니다.
다른 프로젝트에서 적용한다면 이 부분을 서버 개발자와 체크할 필요가 있어 보입니다!
가장 좋은 것은 클라이언트에서 이 부분도 생각해서 설정하는 것이겠지만..

const baseInstance = axios.create({
  baseURL: `${BASE_URL}`,
  headers: {
    "Content-Type": "application/json",
  },
});

baseInstance.interceptors.request.use((config) => {
  const headers = {
    ...config.headers,
    Authorization: LocalStorage.getItem("booktez-token"),
  };

  return { ...config, headers };
});

🧐 적용 후 달라지는 점

달라지는 것은 없습니다!
api 요청에서 토큰 유무를 생각할 필요가 없습니다. baseInstance로 요청을 보내기만 하면 됩니답
토큰이 있으면 담을 것이고, 없으면 빈 채로 넘길 것입니다.