[Axios] 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)

전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)

들어가며

• Axios의 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor) 개념에 대해 정리해본다.

 

전역 인스턴스(Global Instance)

개념

• Axios의 기본 인스턴스를 설정하여 애플리케이션 전체에서 사용할 수 있도록 하는 방법
• 모든 Axios 요청에 기본적인 설정(예: @baseURL@, @headers@ 등)을 적용할 수 있다.

 

설정 방법

• 프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @global.js@ 파일을 생성한다.
• 그리고 다음과 같이 코드를 작성한다.

import axios from 'axios'; // In latest axios version common property returns "undefined" // axios.defaults.headers.common['Accept'] = 'application/json'; axios.defaults.headers['Accept'] = 'application/json'; axios.defaults.baseURL = '<https://api.example.com>'; // In latest axios version common property returns "undefined" // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

최신 버전의 Axios에서는 common 속성(property)이 없다.

 

사용 방법

• 전역적으로 Axios 설정을 해줄 것이므로, 프로젝트의 @src@ 폴더 안에 있는 최상위 컴포넌트인 @App.jsx@ (또는 @App.js@) 파일에 다음과 같이 @import@를 해준다.

 

/src/App.jsx

import './axios/global';    // Global Instance

function App() {
    // ...
}

export default App;

 

• 이제 모든 컴포넌트에서 Axios를 사용할 경우, 해당 설정이 적용된다.

 

커스텀 인스턴스(Custom Instance)

개념

• 특정 API 요청에 대해 독립적인 Axios 인스턴스를 생성하는 방법
• 이 인스턴스는 다른 설정을 가질 수 있으며, 특정 요청에 맞는 구성으로 사용할 수 있다.

 

설정 방법

• 프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @custom.js@ 파일을 생성한다.
• 그리고 다음과 같이 코드를 작성한다.

import axios from 'axios'; export const authFetch = axios.create({ baseURL: 'https://www.random-api.com', headers: { Accept: 'application/json', }, }); export default authFetch;

 

사용 방법

• 해당 커스텀 인스턴스를 적용시킬 컴포넌트에서 @import@ 하여 사용한다.

 

/src/components/CustomInstance.jsx

import { useState, useEffect } from 'react';

import authFetch from '../axios/custom'; // Custom Instance
import axios from 'axios';

const randomUserUrl = 'https://randomuser.me/api';

const CustomInstance = () => {
  const [data, setData] = useState('');

  const fetchData = async () => {
    try {
      const resp1 = await authFetch('/react-store-products');     // Custom Instance 
      console.log(resp1);
      const resp2 = await axios(randomUserUrl);   // Default Instance
      console.log(resp2);
      
      console.log(resp1);
      console.log(resp2);
    } catch (error) {}
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    // ...
  );
};

export default CustomInstance;

 

 

인터셉터(Interceptor)

개념

• 요청(Request) 또는 응답(Response)을 가로채서(intercept) 그 내용을 수정하거나 추가적인 처리를 할 수 있게 해주는 기능
• 인터셉터를 이용하여 공통적인 로직을 각 요청마다 중복해서 작성하지 않고도 처리할 수 있다.
• 요청 인터셉터(Request Interceptor)와 응답 인터셉터(Response Interceptor)로 나누어진다.

 

요청 인터셉터(Request Interceptor)

• 요청이 서버로 전송되기 전에 가로채어 처리하는 부분
• 주로 인증 토큰을 헤더에 추가하거나, 요청을 로깅하는 등의 작업을 할 때 유용하다.

axios.interceptors.request.use(
  (config) => {
    // 요청 전에 수행할 작업
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config; // 수정된 설정을 리턴한다.
  },
  (error) => {
    return Promise.reject(error);
  }
);

 

응답 인터셉터(Response Interceptor)

• 서버에서 응답이 돌아오면 그 응답을 가로채어 처리하는 부분
• 주로 에러 처리를 통일하거나, 응답 데이터를 가공하는 데 사용된다.

axios.interceptors.response.use(
  (response) => {
    // 응답 데이터를 가공하거나 그대로 리턴한다.
    return response;
  },
  (error) => {
    // 에러 응답 처리 (예: 인증 실패 시 리다이렉트)
    if (error.response.status === 401) {
      // 인증 실패 시 로그아웃 처리
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

 

설정 방법

• 프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @interceptors.js@ 파일을 생성한다.
• 그리고 다음과 같이 코드를 작성한다.

import axios from 'axios'; export const authFetch = axios.create({ baseURL: 'https://www.random-api.com', headers: { Accept: 'application/json', }, }); export default authFetch; // request.use() : 요청이 나가기 전에 호출되는 함수 authFetch.interceptors.request.use( (request) => { // request.headers.common['Accept'] = `application/json`; request.headers['Accept'] = `application/json`; console.log('request sent'); // must return request return request; }, (error) => { return Promise.reject(error); } ); // response.use() : 응답이 들어올 때 호출되는 함수 authFetch.interceptors.response.use( (response) => { console.log('got response'); return response; }, (error) => { console.log(error.response); if (error.response.status === 404) { // do something console.log('NOT FOUND'); } return Promise.reject(error); } );

 

사용 방법

• 해당 인터셉터를 적용시킬 컴포넌트에서 @import@ 하여 사용한다.

 

/src/components/Interceptors.jsx

import { useState, useEffect } from 'react';
import authFetch from '../axios/interceptors.js';

const url = 'https://www.random-api.com/react-store-products';

const Interceptors = () => {
  const [data, setData] = useState('');

  const fetchData = async () => {
    try {
      const resp = await authFetch('/react-store-products');
      console.log(resp);

      setData(JSON.stringify(resp.data, null, 2));
    } catch (error) {}
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <h2 className="text-center">interceptors</h2>
      <div className="content">{data.slice(0, 1500)}...</div>
    </div>
  );
};

export default Interceptors;

 

API 요청(Request) 직전과 서버 응답(Response) 직후의 결과를 개발자 도구에서 확인한 모습

 

참고 사이트

The Axios Instance | Axios Docs

Interceptors | Axios Docs