Axios - instance와 interceptor 정의, .env와 api파일로 리팩토링하기

axios insterceptor는 이름 그대로 흐름을 통신 중 흐름을 가로채 관여하는 것

그로인해 가능한 작업들에는 요청 헤더 추가, 인증관리, 로그관련 로직 삽입, 에러 핸들링과 같은 것들이 있다.

출처 : https://javascript.plainenglish.io/how-to-implement-a-request-interceptor-like-axios-896a1431304a

---

기존에 로컬주소를 일일히 넣어주며 작성했던 투두리스트 코드를 instance와 axios interceptor를 이용해 리팩토링 해줘보자!

우선 json-server 셋팅을 완료해주고 시작

1. .env 파일 생성
2. axios폴더 생성하여 api.js파일 생성
   • import axios into api.js
   • instance로 변수만들어서  axios create 메소드를 통해 .env에 있는 url주소를 다시한번 불러와 준다.
3. App.jsx
   • 기존 임포트 하던 axios 대신 api를 임포트 해주고, axios로 불러오던 함수들을 api로 변경해준다.
   • 따라서 일일히 입력해주던 전체 url은 더이상 필요없어진다.
   • 이후 url이 변경될 시 환경변수 .env 파일에서만 변경해주면 전체 적용 완료!
4. 추가로, instance.interceptors를 활용한 에러메세지 함수를 적용해줬다.

// .env 파일

REACT_APP_SERVER_URL=http://localhost:4000

// axios/api.js

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
  timeout: 1000, // 1초 = 1000
});

instance.interceptors.request.use(
  // 요청을 보내기 전 수행되는 함수
  function (config) {
    console.log("inerceptor request success");
    return config;
  },

  // 오류요청을 보내기 전 수행되는 함수
  function (error) {
    console.log("interceptor request error");
    return Promise.reject(error);
  }
);

instance.interceptors.request.use(
  // 응답을 내보내기 전 수행되는 함수
  function (response) {
    console.log("interceptor response recieved");
    return response;
  },

  // 요류응답을 내보내기 전 수행되는 함수
  function (error) {
    console.log("interceptor reponse error");
    return Promise.reject(error);
  }
);

export default instance;

// App.jsx 기존 코드
import axios from "axios";

...

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };
  
  const onSubmitHandler = async () => {
    axios.post("http://localhost:4000/todos", inputValue);
    fetchTodos();
  };

  const onDeleteButtonHandler = async (id) => {
    axios.delete(`http://localhost:4000/todos/${id}`);
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };

// App.jsx 변경 코드
import api from "./axios/api"; // 기존의 axios 임포트 대신 만들어준 api를 임포트 해준다

...

  const fetchTodos = async () => {
    const { data } = await api.get("/todos"); // axios 대신 api로 바꿔주며 기존의 긴 로컬호스트는 삭제!
    setTodos(data);
  };
  
  const onSubmitHandler = async () => {
    api.post("/todos", inputValue);
    fetchTodos();
  };

  const onDeleteButtonHandler = async (id) => {
    api.delete(`/todos/${id}`);
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };