[TIL] axios 사용법

 

오늘은 브라우저와 node를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios의 사용법에 대해 알아보도록 하겠습니다.

 

1. Axios는 무엇인가요??

 

axios는 앞서 말씀드렸던 것처럼 브라우저와 node를 위한 비동기 통신 라이브러리입니다. axios를 활용하기 전에는 주로 fetch함수를 통해 백엔드와 통신을 했었는데요, axios의 등장 이후로는 axios를 활용한 통신이 주를 이루고 있다고 합니다. 제가 주로 사용하는 react 뿐만 아니라 vue를 비롯한 다양한 UI 라이브러리에서도 axios를 활용한 백엔드 통신을 많이 활용한다고 합니다.

 

2. axios의 특징 

 

1) 운영 환경에 따른 유연성

 

앞서 말씀드렸다시피 axios는 브라우저 또는 node를 위한 비동기 통신 라이브러리입니다. 따라서 자바스크립트를 쓰는 유저들의 경우에는 node api를 활용할 수 있고, 자바스크립트를 사용하지 않는 유저의 경우에는 브라우저의 XMLHttpRequest 객체를 사용하여 통신할 수 있는 환경을 제공해줍니다. 그만큼 유연한 환경을 제공할 수 있습니다.

 

2) Promise API 사용 

 

axios는 전에 포스팅 했던 Promise객체를 활용한 데이터 통신을 지원합니다. 따라서 콜백 지옥에 빠지지 않고 보다 효율적으로 통신을 할 수 있도록 도와줍니다.

 

3) HTTP 요청과 응답을 자동으로 json 형태로 바꿔줌

 

axios는 http 요청과 응답을 자동으로 json 형태로 바꿔주기 때문에 사용자의 입장에서 어떤 식으로 데이터를 보내야하는지에 대한 고민을 조금이나마 덜 수 있도록 도와줍니다. 

 

 3. axios 사용법

 

1) 설치

 

(1) npm

 

$ npm install axios

 

(2) yarn

 

$ yarn add axios

 

2) Method 종류

axios의 메소드는 여러 종류가 있지만 이번 포스팅에서는 가장 많이 사용되는 메소드인 get과 post에 대한 메소드만을 다뤄보도록 하겠습니다.

(1) get 

 

axios의 메소드 중 get 메소드를 사용하는 방법은 다음과 같습니다.

 

// GET method

import axios from 'axios';

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
  // 출처: https://velog.io/@sss5793/axios-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-uuk5elxk88
  
  
  // or
  
  axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
    console.log(Response.data);
}).catch((Error)=>{
    console.log(Error);
})
// 출처: https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0#axios-%ED%8A%B9%EC%A7%95

 

(2) post

 

post 메소드를 사용하는 방법은 다음과 같습니다.

 

// POST method

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

//or

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  //출처: https://velog.io/@sss5793/axios-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-uuk5elxk88

 

4. 마무리

 

그동안은 fetch 함수를 이용해 백엔드와 소통했었는데 axios라는 좋은 라이브러리를 알게 되어 새로운 무기가 하나 더 생긴 기분입니다. ㅎㅎ axios는 fetch보다 범용성이나 활용도 면에서도 훨씬 좋고 또 현업에서 많이 사용한다고 하니 얼른 익숙해져서 한층 더 실력 좋은 개발자가 될 수 있도록 해야겠습니다. 오늘 포스팅 봐주셔서 감사합니다.^^