Axios

Axios란? 

 

HTTP 비동기통신을 위한 Promise기반의 자바스크립트 라이브러리 입니다.

(유사한 라이브러리들로 fetch, superagent, request 등이 있습니다.)

 

클라이언트/서버에서 동일하게 작동하며 다양한 브라우저를 지원하고 ES6 문법을 사용합니다.

 

다양한 방법이 있지만 저는 create() 메서드로 인스턴스를 생성해서 사용하는 방법을 선호합니다.

 

const instance = axios.create({
  baseURL: 'https://blabla.com/api/',
  timeout: 30000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json; charset=UTF-8',
  },
});

 

이렇게 인스턴스를 생성해서 다양한 방법으로 사용한다면 헤더와 같은 공통 설정을 하는 효과 뿐만아니라 편하고 가독성도 좋아집니다.

 

 

 

간단한 예로 아래와 같이 url, data, config들의 값을 받거나 지정해주고 method별 호출이 가능하겠죠? 

 

switch (method) {
    case 'post':
      return instance.post(url, data, {
        ...config,
      });
    case 'patch':
      return instance.patch(url, data, {
        ...config,
      });
    case 'put':
      return instance.put(url, data, {
        ...config,
      });
   

      .
      .
      .

 

 

https://xn--xy1bk56a.run/axios/guide/#axios%EB%9E%80

위 링크(axios 공식문서 가이드 번역본)에 기초적인 부분부터 자세히 설명되어있으니 참고해주세요!