axios interceptors / defaults

axios 요청을 사용하면서 생긴 불편함을 해결해주는 메소드 정리.

 

아래 적힌 일들을 해결하기 위해 axios 에서 제공해주는 interceptors / defaults 를 적용.

 

 

 

매번 axios 요청할때마다 URL 을 고정적으로 설정한다.

 

axios 요청을 할 때 마다 헤더를 고정적으로 설정해 놓는다.

 

에러가 발생했을때 공통 alert 를 띄운다.

 

 

요청 고정 URL 설정

const YOUR_URL = ''

axios.defaults.baseURL = YOUR_URL

 

로그인 이후에 모든 요청에 토큰을 보내는 설정

axios.defaults.headers.common["Authorization"] = ${localStorage.getItem("token")};

인터셉터는 요청 직전 혹은 응답을 받고 then, catch 코드를 타기 직전에 실행할 수 있다.

 

REQ

axios.interceptors.request.use(
  config => {
    // Request 보내기 전에 수행됨
    // config 자체에는 request의 정보가 다 들어있음. url, headers, data 등
    // config를 반환하거나, Promise.resolve(config)으로 반환하면 되는 듯
    console.log(config)
    return config
  },
  error => {
    // Request 수행 중 오류 발생 시 수행됨
    return Promise.reject(error);
  },
)

 

RES

axios.interceptors.response.use(
    function (response) {
//        http status가 200인 경우 응답 성공 직전 실행. 
//        .then()
        return response;
    },

    function (error) {
//        http status가 200이 아닌 경우 응답 에러 직전 실행.
//        .catch()
        return Promise.reject(error);
    }
);

 

 

 

 

 

 

 

 

 

참조

 

https://github.com/axios/axios

axios/axios

https://yamoo9.github.io/axios/guide/interceptors.html

인터셉터 | Axios 러닝 가이드

https://yamoo9.github.io/axios/guide/config-defaults.html#%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EC%9D%98-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95

Config 기본 설정 | Axios 러닝 가이드