[axios] axios instance를 만들어보자

axios instance

프로젝트를 할때면 API 요청 헤더에 공통적으로 들어가는 코드들이 있었습니다.

이를테면 토큰과 "content-type": "application/json"같은 property들은

주로 쓰는 네트워크 요청 라이브러리 axios의 인자로 늘 작성해주었습니다.

 

메인 프로젝트에서 다른팀 코드를 보다 알게된 axios instance는

중복된 헤더들을 한곳에서 선언할 수 있게 해주었습니다.

 

axios instance를 생성하면 여러 가지 설정(기본URL, 요청 헤더, 인터셉터, 기본 요청 옵션)을

사전에 정의하고 재사용할 수 있습니다.

 

예시코드

//axiosInstance.js

import axios from "axios";

const BASE_URL = process.env.REACT_APP_API_URL;

const token = localStorage.getItem("access_token");

//일반 요청
export const instance = axios.create({
    baseURL: BASE_URL,
    timeout: 1000, // 요청 타임아웃 설정 (1초)
    headers: {
      "Content-Type": "application/json",
    },
  });

//토큰이 필요한 요청
export const authInstance = axios.create({
  baseURL: BASE_URL,
  timeout: 1000,
  headers: {
    "Content-Type": "application/json",
    Authorization: token,
  },
})

저는 토큰이 필요한 경우와 아닌 경우를 나누어서 instance를 만들어 주었습니다.

//Signup.js

import { instance } from "../apis/axiosInstance";

  const handleSignup = (event) => {
    event.preventDefault();
    instance
      .post(url, {
        email,
        password,
      },
      // {
      //    headers: {
      //      "Content-Type": "application/json",
      //    },
       })
      .then((res) => {
        if (res.status === 201) {
          navigate("/signin");
        }
      })
      .catch((error) => console.log(error));
  };

// Todo.js

import { authInstance } from "../apis/axiosInstance";

const handleTodoSubmit = (event) => {
    event.preventDefault();
    authInstance
      .post(url, {
        todo: todoValue,
      },
 	// {
  	//   headers: {
	//     Authorization: token,
	//     "Content-Type": "application/json",
	//   },
	// })
      .then((res) => {
        console.log(res.data);
        setTodoValue("");
        const newTodo = {
          id: res.data.id,
          todo: todoValue,
          isCompleted: false,
        };
        setTodos((prevTodos) => [...prevTodos, newTodo]);
      })
      .catch((error) => console.log(error));
  };

필요한 컴포넌트에 export 한 뒤 중복된 코드인 부분을 모두 삭제해

코드를 더 깔끔하게 유지하고 HTTP 요청을 일관되게 처리할 수 있습니다.

Ref

https://axios-http.com/docs/instance

The Axios Instance | Axios Docs