[Axios] Axios 인스턴스 생성하기

지금까지 axios를 사용할 때는 아래와 같이 사용했다.

  const url = "https://jsonplaceholder.typicode.com/";
  const getInfo = () => {
    axios
      .get(url + "posts")
      .then((res) => {
        console.log(res);
      })
      .catch((e) => {
        console.error(e);
      });
  };

 

또다른 방법으로는 인스턴스를 생성하여 사용하는 방법이 있는데, 이를 사용하면 사용자 정의 구성을 사용할 수 있다. 또한, axios를 모듈화함으로써 재사용성을 높일 수 있다. 이때 재사용성을 높이기 위해 커스텀 훅을 만들어 사용하겠다.

// useAxios.js

export const useAxios = () => {
  const request = axios.create({
    baseURL: "https://jsonplaceholder.typicode.com/",
    timeout: 3000,
  });
  
  return [request];
};

Axios는 fetch와 다르게 timeout이라는 것이 있는데, timeout이 3000ms라는 것은 api 통신이 3초 동안 되지 않으면 무한정 기다리지 않고 연결을 끊어버린다는 얘기이다. 이렇게 작성 후에 axios 통신을 하게 되면 아래와 같다. 추가로 아래 코드는 비동기 처리를 .then에서 async await로 변경한 코드이다.

  import { useAxios } from "../hooks/useAxios";
  
  const [request] = useAxios();
  const getInfo = async () => {
    try {
      const response = await request.get("posts");
      console.log(response);
    } catch (e) {
      console.error(e);
    }
  };

 

위처럼 request를 불러와서 baseURL을 따로 입력하지 않아도 된다. 이렇게만 보면 뭐가 재사용성이 좋은지 잘 와닿지 않을 수도 있는데, 좀 더 자세한 예시는 다음 글에서 다루도록 하겠다.