Axios.create 사용기

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.

프레임워크에서 ajax를 구현할때 axios를 보통 사용

Fetch에 비해 별도의  설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다.

 

나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, 

axios.create 를 사용해 주었다

import axios from "axios";

const api = axios.create({
  baseURL:
    "~~",
  timeout: 3000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다!

import api from "./api";
const url = "/nft/create";

const CreateAPI = {
  createNft: async (data: any) => {
    await api
      .post(`${url}`, data, {
        withCredentials: true,
      })
      .catch((err) => {
        console.log("ERROR", err);
      });
  },
};

export default CreateAPI;

이런식으로 기본 base url에 뒤에 /nft/create를 추가해 주었다.(endpoint 혹은 파라미터 값, 쿼리스트링 추가)

 

axios.create 를 사용하는 이유는 다음과 같다.

1. 인스턴스의 기본 설정값 지정: axios.create를 사용하면 인스턴스를 생성할 때 기본 설정값을 미리 지정할 수 있다. 예를 들어, baseURL, headers, timeout 등의 설정값을 인스턴스 생성 시점에서 미리 지정할 수 있어서 코드의 중복을 줄일 수 있다.
2. 인터셉터 설정: axios.create를 사용하면 인터셉터를 미리 설정할 수 있다. 인터셉터는 요청과 응답을 가로채서 처리하는 기능으로, 요청 전에 공통적으로 처리해야 할 작업이나 응답 후에 처리해야 할 작업을 설정할 수 있다. 인터셉터를 사용하면 코드 중복을 줄이고, 유지보수성을 높일 수 있다.
3. 특정 API와의 통신: axios.create()를 사용하여 각각의 API에 대한 설정값을 따로 설정할 수 있습니다. 예를 들어, 다른 API에서 사용되는 baseURL, timeout, headers 등을 각각 다르게 설정할 수 있습니다.

이러한 이유로, Axios.create() 사용이 권장된다고 한다!!!