[React] Axios instance와 interceptors

Axios란 ?

axios는 서버와 통신하기 위한 HTTP 비동기 통신 라이브러리 입니다 ! 보통 처음 접하는 axios 요청은 아래와 같이 작성할 것입니다.

// get 요청
axios.get('/test')
// post 요청
axios.post('/test', {
    testString : 'test'
})

 

Axios instance

기본 axios에서 더 나아가 instance를 설정해줄 수 있습니다.

axios instance를 이용하여 API 통신에 대한 구성 기본 값 설정을 더 쉽게 할 수 있습니다 !

export const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_URL_JAVA,
  headers: {'Content-Type' : 'application/json'},
  withCredentials: true
})

 

Axios interceptors

개인적으로 정~말 유용한 axios interceptors에 대해 알아보겠습니다 !

axiosInstance.interceptors.request.use((config) => {
  const cookies = new Cookies();
  config.headers['Authorization'] = cookies.get('accessToken')
  return config;
})

 

위 코드는 생성해 놓은 axiosInstance를 통해 요청이 진행될 경우 실행되며, 작성해 놓은 코드와 같이 headers에 Token을 담아 전달할 수 있습니다 !