[API 비동기 통신! 이렇게 해보자] 01 - Axios instance 만들기

프론트엔드 개발 시, 서버 API 호출이 필요한 경우 Fetch와 Axios 중 무엇을 더 많이 사용하시나요?

저는 개발 공부를 시작했을 코린이 시절부터 지금까지 Axios를 쓰고 있습니다. 

 

Fetch()는 자바스크립트에서 제공해주는 메소드로 따로 외부 패키지를 설치할 필요가 없습니다.

Axios는 브라우저와 node.js 환경에서 비동기 통신을 위한 라이브러리로 따로 패키지 설치가 필요합니다.

 

개발을 할 때 보통 라이브러리를 최대한 많이 안쓰자는 주의이지만 Axios는 항상 쓰고 있습니다. 
하지만 처음에는 그냥 Axios가 좋다는 말을 주워듣고 막 쓰기 시작했습니다. Axios의 강점을 효율적으로 사용하지도 못하면서요.

 

아래가 예전에 제가 작성했던 방식의 코드로 참 비효율적입니다..😅

 

//React 컴포넌트에서 api 통신 할 때...

import axios from 'axios';

//일단 공통되는 URL 문자열을 따로 변수에 할당해준다. (알고보면 큰 의미 없는 짓)
const URL = "https://dummyjson.com";
const token = localStorage.getItem("token");

//일단 try..catch문으로 에러처리 해야지~ 그리고 header에 JWT도 넣어줘야지~ 라고 생각

async function getAllProducts() {
  try{
    const res = await axios.get(URL + '/products',{
      headers: {
        Authorization : `bearer ${token}`
      }
    })
  } catch(error){
    console.error(error)
  }
}

 

아주 기본적인 Axios사용의 예이지만 효율적인 코드는 아닙니다.
왜냐하면 모든 페이지 파일마다 일일이 URL 변수를 만들고 JWT token을 넣어주었거든요.

다시 말하면, API 통신 기능만을 위한 코드가 분리(모듈화)되지 않은 것입니다. 그럼 재사용성은 당연히 기대할 수 없겠죠.

 

코린이 시절을 지나 회사에 입사 후 개발을 하면서 서버와 비동기 통신을 하기 위한 코드를 모듈화하는 작업을 해보게 되었고, 이에 대한 과정을 글로 공유해보려고 합니다.

 

그 첫번째 타자는 바로 Axios 입니다. 😁

 

Axios에 대한 설명과 설치 방법은 생략합니다

 

 

 

Axios 인스턴스를 만들어보자!

보통 axios를 install한 후, 바로 사용하게 된다면 아래와 같이 기본적인 코드를 작성할 수 있습니다.

 

아래와 같이 config를 직접 작성할 수도 있고,

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

 

편의를 위해 axios.get()과 같은 메소드를 바로 사용할 수 있습니다.

const base_url = 'http://something.something';

async function getUser() {
  try {
    const response = await axios.get(base_url + '/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

하지만 매번 API 호출 때마다 base_url을 포함한 config옵션들을 작성해주는 것은 매우 번거로운 작업입니다.

이 때, axios 인스턴스 생성으로 API 요청할 때의 공통되는 config 값을 설정해 줄 수 있습니다.

 

 

• 인스턴스 생성

axios 인스턴스 생성 메소드는 axios.create()입니다.

저는 axiosInstance라는 함수로 한번 감싸줘서 인스턴스를 return 하도록 했습니다.

보통 api 요청을 보낼 때, 사용자 인증을 위해 header에 token을 넣어 요청을 보내는 경우가 많은데, 이 경우에도 axios instance를 생성하여 config에 설정해줄 수 있습니다.

// 보통 실무에선 테스트서버, 메인서버용 등의 URL이 따로 있기 때문에 base url은 env로 관리하는 경우가 많다.
const BASE_URL = "https://dummyjson.com";
const token = localStorage.getItem("token");

const axiosInstance = (url, params, options) => {
  const instance = axios.create({
    baseURL: url,
		//api요청 할 때, 토큰인증이 필요한 경우 headers 값도 추가할 수 있다.
		headers: { Authorization : `Bearer ${token}` }
    params: params,
		//그 외 상황에 따라 옵션이 필요한 경우를 대비해 options 인자도 세팅해준다.
    ...options,
  });
  return instance;
};

export const dummyApi = axiosInstance(BASE_URL);

 

 

위와 같이 로컬 스토리지에 담긴 토큰을 불러와 header에 넣어주었고, API를 호출할 base url도 설정을 해주었습니다.

 

• 인스턴스 활용

//위에서 작성한 인스턴스를 불러온다.
import { dummyApi } from "./index.js";

async function getAllProducts() {
  try{
    const res = await dummyApi.get('/products')
  } catch(error){
    console.error(error)
  }
}

위에서 작성한 axios 인스턴스를 활용하게 되면 이렇게 base_url 값을 일일이 넣어줄 필요가 없어졌습니다.

그리고 header에 token도 설정된 상태로 요청하게 됩니다.

혹시나 PUT이나 POST와 같은 Method로 요청을 해야할 때, body 값에 데이터를 넣어서 요청해야 한다면
dummyApi.post() 안에 인자로 넣어주면 됩니다.
 

예시)

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })

 

 

물론, axios를 한번 더 감싸서 api 호출을 효율적으로 할 수 있도록 모듈 함수를 작성할 수도 있습니다.이는 추후에 다뤄보도록 하겠습니다.

 

 

이 다음 편은 axios interceptor 사용에 대해 공유해보려고 합니다.

 

 

 

To be Continued.... 😎