[Javascript] REST API 호출을 위한 라이브러리, axios

network reqeust를 아주아주 편하게 만들어주는 작고 직관적인 라이브러리인 axios에 대해 알아보자.

 

설명하기에 앞서, 만약 당신이 제이쿼리를 사용하고 있고

제이쿼리에서 사용하는 기능이 쿼리셀렉트(ex: $("#test") )와 네트워크 통신(ex: $.get(...))뿐이라면

쿼리셀렉트를 기본 API로 변경하고 네트워크 부분은 axios로 교체하는 것을 추천한다.

(왜냐면 compress되었다 하더라도 제이쿼리자체가 파오후라 어쩔 수 없이 로딩이 좀 걸린다)

 

실전압축으로다가 빠르게 알아보자.

 

Installation

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>을 삽입하거나

 

npm을 사용중이라면 터미널에 yarn add axios를 사용해 설치하자.

 

Axios를 사용해보자

많고많은 함수들이 구현되어 있지만, 딱 하나만 잘 써도 단물 다 빨 수 있다.

 

axios.request(); 만 빠르게 알아보자.

 

이름에서 알 수 있듯이, request를 보내주는 함수다.

매개변수로는 object타입의 config를 받는다.

 

간단한 예제를 하나 보자.

 

axios.request({
  method: 'GET',
  url: `https://www.test.com`,

  headers: {'Content-Type': 'application/json'},

  params: { msg: hi},
});

 

config에는 request에 대한 옵션들에 대해서 정의한다.

그대로 해석해 본다면, GET메소드를 사용하여 https://www.test.com에다가 header에는 'Content-Type: application/json'을 추가하고 쿼리스트링에는 msg=hi를 지정하여 request를 보낸다는 의미이다.

(params에 전달된 object는 쿼리스트링으로 변환되어 url에 붙여진다)

 

하나 더 보자. 

axios.request({
  method: 'POST',
  url: `https://www.test.com`,

  headers: {'Content-Type': 'application/json'},

  data: {
    password: 'testpw123',
  }
});

그대로 해석해 본다면, POST메소드를 사용하여 https://www.test.com에다가 header에는 'Content-Type: application/json'을 추가하고 바디에는 {password: 'testpw123'}를 지정하여 request를 보낸다는 의미이다.

(data에 전달된 object는 request body에 들어간다)

 

만약 Content-Type이 application/json이 아니라 formdata를 요구한다면

data에 그냥 오브젝트로 박지 말고

 

const formdata= new FormData();

formdata.append('password', 'testpw123');

axios.request({
  method: 'POST',
  url: `https://www.test.com`,
  data: formdata,
});

 

와 같이 FormData에다가 append해서 전달해주면 된다.

 

Get Response

js에서 네트워크 통신은 비동기적으로 이루어진다

(만약 동기적으로 한다면 아마 사용자들은 그거 기다리느라 화병났을거다)

 

즉, axios.request({...})는 Promise를 리턴한다.

따라서 axios.request({...}).then(response=> ...);과 같이 사용할 수 있다.

에러 캐치가 필요하다면 axios.request({...}).then(response=> ...).catch(e=> ....); 처럼 사용할 수도 있다.

 

axios.request({
  //some options
}).then(response=>{
  const {data: responseBody, status: responseCode}= response;
  //...
}).catch(e=>{
  //then에서 예외가 발생했거나, response code가 400 이상인 경우(실패) 이쪽으로 넘어온다
  console.error(e);
});

 

then의 response는 말그대로 request에 대한 response 정보를 담은 객체이며,

response.data를 하면 response body를 얻을 수 있다.

 

만약 Promise에 대한 이해가 부족하다면, 아래의 글을 읽으면 좋을 것 같다.

https://satisfactoryplace.tistory.com/84