Axios 코드 치기 귀찮을 때, Axios 인스턴스

 Axios를 이용하다보면 이런 식으로 코드가 겹치는 부분이 있는 경우가 많다.

export const createTodo = async (accessToken, todo) => {
  try {
    const response = await axios.post(
      `어디어디/todos`,
      { todo },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        },
      }
    );

    return response.data;
  } catch (error) {
    return null;
  }
};

export const getTodos = async (accessToken) => {
  try {
    const response = await axios.get(`어디어디/todos`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    return response.data;
  } catch (error) {
    return [];
  }
};

위의 코드같은 경우에는 '어디어디/', headers가 겹치는 부분이다. 이런 함수가 적으면 상관이 없지만, 많으면 저 코드를 다 작성하는 게 굉장히 귀찮아질 것이다. 이럴 경우, Axios 인스턴스라는 것을 이용할 수 있다. 이를 통해 axios를 통한 http 요청 시 자주 이용하는 것들을 미리 빼둘 수 있다. 대략 다음과 같이 이용할 수 있다.

 

import axios from 'axios';

export const axiosInstance = axios.create({
  baseURL: '어디어디',
  headers: { 'Content-Type': 'application/json' },
});

export const handleLogin = async (email, password) => {
  try {
    const response = await axiosInstance.post('/auth/signin', {
      email,
      password,
    });

    return response.data.access_token;
  } catch (error) {
    return null;
  }
};

1.  axios.create를 이용해 자주 이용하는 것들을 인스턴스로 만든다. 위의 코드에서는 baseURL, headers를 설정했으며, 더 자세한 것은 아래의 링크에서 확인할 수 있다.
2. axios를 이용할 경우, 인스턴스.get, 인스턴스.post 등으로 코드를 작성한다. 만약 baseURL을 지정해놓았다면 baseURL 후 더 필요한 부분만 작성하면 된다.

 

팀 프로젝트를 진행하며 다른 팀원분 덕분에 이를 더 재사용성 좋게 이용하는 방법을 알게 되었다.

// ** axios interceptor **
// 요청 또는 응답이 전송되기 전 또는 후에 수행되는 중간 처리 함수
// 요청 헤더를 수정하거나 응답 데이터를 변활할 수 있다.

import axios from 'axios';

const getAxiosInstance = () => {
  const config = {
    baseURL: 'BASEURL',
    headers: {
      'Content-Type': 'application/json',
    },
  };

  const instance = axios.create(config);

  instance.interceptors.request.use(
    request => {
      const access_token = localStorage.getItem('access_token');
      if (access_token) {
        request.headers.Authorization = `Bearer ${access_token}`;
      }

      return request;
    },
    error => {
      return Promise.reject(error);
    }
  );

  return instance;
};

const axiosInstance = getAxiosInstance();

export const apiRequest = async (url, method, data) => {
  try {
    const response = await axiosInstance.request({
      url,
      method,
      data,
    });
    return response;
  } catch (error) {
    alert(error.response.data.message);
    return null;
  }
};

export const createTodo = async todo => {
  const response = await apiRequest('/todos', 'post', { todo });

  if (response) {
    return response.data;
  } else {
    return null;
  }
};

getAxiosInstance 함수를 통해 인스턴스를 만드는데, 중간에 access_token의 유무에 따라 heaaders가 달리지게 코드를 작성했다. 그리고 apiRequest라는 함수를 통해 BASEURL 뒷부분, method(GET, POST, DELETE 등), data를 인자로 받아 요청을 하는 함수를 작성하였다. 이를 통해 createTodo라는 함수가 저렇게 짧아질 수 있었다.

 

 또, 구글링을 통해 찾아보았는데 만약 headers나 다른 걸 추가하고 싶을 경우,

export const apiRequest = async (url, method, data, headers) => {
  try {
    const requestConfig = {
      url,
      method,
      data,
      headers,
    };

    const response = await axiosInstance.request(requestConfig);
    return response;
  } catch (error) {
    alert(error.response.data.message);
    return null;
  }
};

이것처럼 requestConfig같은 객체를 만든 후, .request에 적용하면 된다는 것 같다. 하지만 아직 이 부분은 적용해보지 못했다.

---

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

Axios 인스턴스 | Axios Docs

https://github.com/axios/axios#creating-an-instance

GitHub - axios/axios: Promise based HTTP client for the browser and node.js