기타

interceptor in <axios> //// axios setting

승딱 2021. 6. 15. 15:47
반응형

axios 요청시

 

1. 기본 url 설정 

 

2. 헤더기본설정

 

3. 에러가 났을때 공통으로 처리하고 싶을때

 

interceptor : 1. 요청하기 직전 , 2. 응답을 받고 try catch 문으로 처리직전에  가로챌수 있다.

 

axios.defaults.baseURL = process.env.BASE_URL;

axios.defaults.headers.token = token;

axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 

글로벌 axios 설정

// axios 인스턴스를 만들 때 구성 기본 값 설정
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 인스턴스가 생성 된 후 기본값 변경
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

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

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error); // 그냥 error 리턴해도 되는듯?
  });