Axios baseURL과 header 매번 적기 귀찮으니까 axios.create([config])

전에 youth-gallery 팀 프로젝트를 할 때는 매번 baseURL과 headers를 적어줬었던 것 같다. 헷갈리기도 하고 혹시 잘못 적어 어이없는 오류가 발생할 수 있기 때문에 이번 개인 프로젝트에서는 axios.create()를 사용하기로 했다.

 

1. 간단한 소개

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  headers: { 'X-Custom-Header': 'foobar' },
  timeout: 1000,
});

위의 예제처럼 만들어주면 되는데... 엄청 간단했는데 왜 알고 있었는데 전에는 사용하지 않았을까 싶은 마음이 든다.

 

2. 내가 활용한 방식

 

우선 나는 토큰을 포함한 것과 토큰 없이 baseURL만 있는 것으로 나눠서 작성하였다.

(혹시 다른 좋은 방법이 있다면 제안해주시면 감사하겠습니다! 😊)

 

client.js (헤더에 토큰이 필요 없을 때 사용)

import axios from 'axios';

const client = axios.create();

client.defaults.baseURL = 'https://주소.co.kr';

export default client;

 

instance.js (헤더에 토큰이 필요할 때 사용)

import axios from 'axios';

const client = axios.create();

client.defaults.baseURL = 'https://주소.co.kr';

export default client;

 

이렇게 만들어주고 axios를 사용할 파일에 가서 👇 이런 식으로 사용해주면 된다.

import instance from '../../client/instance';

function handleButton() {
  instance
    .post('/cart/', { data })
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log(error);
    });
}

 

나는 이렇게 설정해두니까 혹시 모를 오타나 어이없는 실수를 할 일이 줄어 좋았다.

 

참고

https://yamoo9.github.io/axios/guide/api.html