axios interceptor 적용하기

interceptor를 왜 적용했냐?

답은 바로 귀찮아서!!!!!!!!!!!!!!!

게다가 연구 초창기에 테스트를 위해서 주먹구구 사용하던 코드로 계속 개발을 진행하다 보니
아래와 같은 문제점이 있었음!

1) api 호출할 때마다 비효율적으로 axios 인스턴스를 생성
2) axios 마다 동일한 content-type , token와 같은 헤더값 처리
3) axios TIMEOUT 시간, base url 등에 대한 중복 처리

으으,,, 유지보수가 hell이 된다,,,,
하나를 변경하려면 모든 파일의 값을 수정해야하는,,,으으 😱😱😱

👎 적용 전 코드

실제로 적용했던 게시판 API 호출 코드다 ^^;;;; 대충 봐도 위에서 말했던 문제점들이 딱 보인다.

 
  writeBoardContent(condition) {
    
    var params = {
      userNo: AuthService.getUserNo(),
      boardTitle: condition.boardTitle,
      context: condition.context,
    };

    return axios.post(base + "write", params, {
      headers: AuthService.getAuthHeader(),
    });
  }
  
  modifyBoardContent(condition) {
    var params = {
      boardNo:condition.boardNo,
      boardTitle: condition.boardTitle,
      context: condition.context,
    };

    return axios.put(base + "modify", params, {
      headers: AuthService.getAuthHeader(),
    });
  }
}

👍 적용 후 코드

axios interceptor 를 적용한 파일을 ApiContoller.js로 명했고,
axios 생성, 요청과 응답에 대한 전/후 처리 그리고 오류 처리가 가능함!

1) axios 생성

• baseUrl과 timeout 설정
• 해당 instance를 export 하여 다른 파일에서 import 할 수 있게 하였음

const instance =axios.create({
baseUrl: 데이터를 요청할 기본 주소,
timeout : 1000 (변경 가능)
};

2) axios request 처리

• config에 header 설정을 하고, 요청에 대한 오류 발생시에는 오류 내용을 출력하고 요청이 거절되도록 설정

instance.interceptors.request.use(
  function (config) {
    config.headers["Content-Type"] = "application/json; charset=utf-8";
    config.headers["Authorization"] = " 토큰 값";
    return config;
  },
  function (error) {
    console.log(error);
    return Promise.reject(error);
  }
);

3) axios response 처리

• 응답에 대한 리턴값 설정과 오류 발생에 대한 처리
• 404, 503 등의 에러 코드에 대한 오류 처리를 위해서 별도로 errorController 생성

instance.interceptors.response.use(
  function (response) {
    console.log(response);

    return response.data.data;
   
  },
  function (error) {
    errorController(error);
  }
);

4) 다른 파일에서 axios 호출

• 예를 들어 로그인을 위한 파일에서는 base뒤에 붙을 url과 통신 방법과 파라미터인 데이터만 지정해주면, 요청과 응답은 interceptor에서 동일하게 처리된다!!

login(data) {
  return ApiController({
    url: "login",
    method: "post",
    data: data,
  })

};

• interceptor 를 적용하면 게시판 api들은 이렇게 간략해진다!

  writeBoardContent(data) {
    var params = {
      userNo: AuthService.getUserNo(),
      boardTitle: data.boardTitle,
      context: data.context,
    };

    return ApiController({
      url: base + "write",
      method: "post",
      data: params,
    });
  }

  modifyBoardContent(data) {
    var params = {
      boardNo: data.boardNo,
      boardTitle: data.boardTitle,
      context: data.context,
      userNo: AuthService.getUserNo()
    };

    return ApiController({
      url: base + "modify",
      method: "put",
      data: params,
    });
  }