ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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 리턴해도 되는듯?
      });

    '기타' 카테고리의 다른 글

    [recoil] 기본  (0) 2021.06.17
    webpack 으로 환경변수 설정하느법  (0) 2021.06.15
    [redux] 리덕스 타입스크립트랑 같이 써보기  (0) 2021.05.28
    [정규표현식]알아보기(2)  (0) 2021.05.26
    [프로그래밍] 순수함수  (0) 2021.05.23
Designed by Tistory.