axios 심화 - instance와 interceptor

axios interceptor의 개념과 필요성

• 상황을 통해 살펴보는 interceptor의 필요성
  앞에서 get, post, delete 등 axios를 활용해 HTTP 통신방법을 배웠다.

axios.get("http://localhost:3001/todos");
axios.post("http://localhost:3001/todos", todo);
axios.delete((`http://localhost:3001/todos/${todoId}`);

이렇게 호출하는 부분이 작업중인 프로젝트 앱에 300개 정도 존재한다 가정해보자. 그런데, 어떤 이유로 호출 서버가 변경되었다.

• 변경 전 : http://localhost:3001
• 변경 후 : http://localhost:4000

그러면 앱에 300군데를 모두 찾아서 변경해줘야 한다.
또 매번 요청 할 때마다 console.log를 통해 어떤 로깅을 하려할때도 300곳을 찾아서 console.log("~~"); 코드를 넣어야한다.

axios interceptor는 이름에서 알 수 있듯, 다음 두 상황에서 흐름을 가로채 어떠한 코드 상의 관여를 할 수 있게 한다.
1. 요청(request)이 처리되기 전( =http request가 서버에 전달되기 전)
2. 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전
출처: https://javascript.plainenglish.io/how-to-implement-a-request-interceptor-like-axios-896a1431304a

따라서 위에서 가정했던 상황들을 포함해 요청 및 응답시에 필요한 작업들을 한꺼번에 처리할 수 있다.

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링
  이러한 부분에서 빛을 발한다.

실습

• instance 만들기, baseURL 설정하기

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

지금까지 위 방법으로 데이터 통신을 했다. 이 axios를 인스턴스(instance)라고 한다. 이걸 입맛대로 변경해보자.

src > axios > api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체
// https://axios-http.com/docs/req_config 참고
const instance = axios.create({
  baseURL: "http://localhost:4000",
});

export default instance;

App.jsx

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;

get 요청부분이 상당히 간결해졌다. 이제 서버의 정보가 변경되어도 api.js 파일만 수정하면 된다.

• request, response에 적용해보기
  요청을 보낼 때, 그리고 서버로부터 응답을 받을 때(실패할 때) 특정한 일을 수행해야 한다면?

src > axios > api.js

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;

브라우저 로그를 확인해보자.

요청과 응답 중간에 가로채서 어떠한 작업을 수행해 주는것을 볼 수 있다.

더 적용할 수 있는 부분

• 요청 시, content-type 적용
• token 등 인증 관련 로직 적용
• 서버 응답 코드에 대한 오류 처리(controller)
• 통신시작 및 종료에 대한 전역 상태를 관리하여 spinner, progress bar 등 구현 가능

axios interceptor를 통해 통신의 중간과정에서 개발자의 머릿속에 있는 모든 것을 다 구현할 수 있다.