#TIL 32일차(axios[2])

---

Axios Custom Instance

const data = await axios.get("http://localhost:4000/");

기존에 데이터 통신을 할 때는 위의 코드와 같이 작성했었다. 그러나 애플리케이션이 커질수록, 매번 동일한 설정을 반복하는 것은 비효율적이다. 그럴 때 자주 사용되는 설정을 미리 정의해놓으면 더욱 편리하게 사용할 수 있는데, 이때 사용하는 것이 Axios Custom Instance이다.

예시 코드

📍 api.js
다음과 같이 baseURL을 설정하여 서버 주소가 변경되더라도 한 곳에서 수정하면 모든 요청에 반영되도록 할 수 있다

// src/axios/api.js
import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:4000",
});

export default api;

📍 App.jsx
이제 instance를 사용하여 HTTP 요청을 보내면 서버 주소가 변경되더라도 api.js 파일만 수정하면 모든 요청에 반영된다.

import "./App.css";
import { useEffect } from "react";
import api from "./axios/api";

function App() {
  useEffect(() => {
    api
      .get("/cafe")
      .then((res) => {
        console.log("결과 => ", res.data);
      })
      .catch((err) => {
        console.log("오류가 발생하였습니다!");
      });
  }, []);

  return <div>axios 예제입니다.</div>;
}

export default App;

Axios Interceptor

Interceptor는 HTTP 요청과 응답을 가로채서 특정 작업을 수행할 수 있게 한다. 예를 들어, 모든 요청에 공통적인 헤더를 추가하거나, 응답에 대한 공통적인 에러 처리를 할 수 있다.

⭐️ Interceptor가 흐름을 가로채는 상황

• 요청(request)이 전송되기 전(또는 요청을 보내기 전, 또는 요청이 출발하기 전)
• 응답(response)의 then(성공) 또는 catch(실패)가 처리되기 전

따라서, Interceptor를 사용하면 요청 및 응답 시 필요한 작업을 한꺼번에 처리할 수 있다.

📍 예시

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링

예시 코드

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    console.log("인터셉트 응답 성공!");
    // 정상 응답
    return response;
  },
  function (error) {
    console.log("인터셉트 응답 실패");
    return Promise.reject(error);
  }
);

export default instance;

브라우저에서 로그를 확인해보면, 요청과 응답 중간에 Interceptor가 작동하여 작업을 수행하는 것을 볼 수 있다.