AXIOS 모듈화, 인터셉터

서버와 통신을 하기 위해 AXIOS를 사용하는데, 계속 반복되는 코드를 작성하게 되어 효율적이지 못했다.!
효율적인 AXIOS 사용법에 대해서 알아보자.

폴더구조는 어떻게?

axios코드를 어떻게 관리할지도 큰 고민이 된다. 이 부분에 대해서는 API 모듈 구조를 참고해서 작성했다.

📦 apis
┣ 📂 api(api request/response)
┃ ┗ user.js
┣ 📂 services(데이터를 정제 함수)
┃ ┗ user.js
┣ 📂 utils(인스턴스/공통 함수 작성)
┗ instance.js

AXIOS 모듈 생성

import axios from 'axios';

const instance = axios.create({
    baseURL:"https://api.themoviedb.org/3",
    params : {
        api_key: process.env.REACT_APP_MOVIE_DB_API_KEY,
        language : "ko-KR",
    },
  	headers: {
    access_token: cookies.get('access_token'),
  }
});

export default instance;

axios.create를 이용하면 axios의 인스턴스를 만들어서 axios를 모듈화 할 수 있다.
baseURL은 서버의 주소를 의미하고 headers, params에 필요한 값을 지정할 수 있다.

인터셉터 사용

axios인터셉터를 사용하면 1.요청하기 직전, 2. 응답을 받고 then, catch로 처리 직전에 가로 채 원하는 작업을 수행 할 수 있다.

import axios from 'axios'

// axios 인스턴스를 생성합니다.
const instance = axios.create({
    baseURL: 'https://api.fasoo.com',
    timeout: 1000
  });

/*
    1. 요청 인터셉터
    2개의 콜백 함수를 받습니다.
*/
instance.interceptors.request.use(
    function (config) {
        // 요청 성공 직전 호출됩니다.
        // axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능)
        return config;
    }, 
    function (error) {
        // 요청 에러 직전 호출됩니다.
        return Promise.reject(error);
    }
);

/*
    2. 응답 인터셉터
    2개의 콜백 함수를 받습니다.
*/
instance.interceptors.response.use(
    function (response) {
    /*
        http status가 200인 경우
        응답 성공 직전 호출됩니다. 
        .then() 으로 이어집니다.
    */
        return response;
    },

    function (error) {
    /*
        http status가 200이 아닌 경우
        응답 에러 직전 호출됩니다.
        .catch() 으로 이어집니다.    
    */
        return Promise.reject(error);
    }
);

인터셉터는 어디에 활용할 수 있을까?

1. 로그인 전, 후 분기 처리해서 해더 삽입
2. 모든 요청에 로딩 인디케이터 삽입
3. 응답 에러 발생시, 알림 팝업 만들기