리액트 axios instance & interceptor/ axios 에러 핸들링

😎 리액트 axios instance & interceptor/  axios 에러 핸들링

이번 프로젝트 코드를 예시로 사용하겠다

✅ axios instance (인스턴스)

axios instance는

axios를 사용할 때 공통으로 들어가는 기본 코드를 모듈화 할 수 있는 방법이다.

import axios from "axios";

export const api = axios.create({
  baseURL: "기본으로 지정할 서버 url",
  timeout: 1000, //요청이 해당 설정 시간보다 지연될 경우 요청은 중단되며, catch로 에러가 전달된다
  headers: {
    "content-type": "application/json;charset=UTF-8",
    //"Accept": "application/json," 주석 이유 : 기본 값이 application/json 이다.
  },
});

 

✅ axios interceptor (인터셉터)

axios interceptor는

axios를 사용할 때 API 요청과 응답에 대한 에러 핸들링 및 공통 작업을 모듈화 할 때 사용한다.

api.interceptors.request.use( //요청 처리
  function (config) {
    const token = localStorage.getItem("token");
    const refreshToken = localStorage.getItem("refreshToken");
    try {
      if (token && refreshToken) { //토큰이 있다면 headers에 토큰 추가
        config.headers.authorization = token;
        config.headers.refreshauthorization = refreshToken;
      }
      return config;
    } catch (error) {
      alert("서버 요청 에러! 다시 시도해주세요!");
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

api.interceptors.response.use( //응답 처리
  function (response) {
    return response;
  },
  function (error) {
    alert("서버 응답 에러! 다시 시도해주세요!");
    return Promise.reject(error);
  }
);

 

✅ axios instance, interceptor 적용

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

export const __loginUser = createAsyncThunk(
  "loginUser",
  async (payload, thunkAPI) => {
    try {
    	//아래 api.post 부분이 instance를 사용한 부분이다
      const data = await api.post(`auth/local`, payload);
      
      //공통 요청,응답 처리가 아닌 개별 처리는 따로 해줘야 한다
      if (data.status === 201) { //로그인 작업 개별 처리
        const accessToken = data.data.token.AccessToken;
        const refreshToken = data.data.token.RefreshToken;
        const nickName = data.data.nickname;

        if(accessToken && refreshToken && nickName){ //토큰 & 닉네임이 있다면
          localStorage.setItem("token", accessToken);
          localStorage.setItem("refreshToken", refreshToken);
          localStorage.setItem("nickName", nickName);
          
          alert("로그인 성공!!!");
          return window.location.assign("/main");
        }
      }
      return thunkAPI.fulfillWithValue(data);
      
    } catch (error) {
      alert("다시 확인해주세요.");
      return thunkAPI.rejectWithValue(error);
    }
  }
);

 

 

 

참고

 

인스턴스 : https://axios-http.com/kr/docs/instance

인터셉터 : https://axios-http.com/kr/docs/interceptors