Axios

원문링크: https://axios-http.com/

Axios란

node.js와 브라우저를 위한 promise 기반의 HTTP Client. 브라우저와 nodejs에서 동일한 코드가 동일하게 동작한다. server-side에서는 native 기반의 node.js httop 모듈을 사용하고, client(브라우저)에서는 XMLHttpRequests를 사용한다.

특징

• 브라우저로부터 XMLHttpRequests를 만든다.
• node.js로부터 http 요청을 만든다.
• Promise API를 보조한다.
• request와 response를 중간에서 가로채어 관리한다.
• request와 response 데이터를 전송한다.
• request를 취소한다.
• JSON data에 대한 자동 변환.
• XSRF로부터 보호하기 위해 client side를 보조한다.

설치

1. using npm

$ npm install axios

2. using bower

$ bower install axios

3. using yarn

$ yarn add axios

4. using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

5. Using unpkg CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

---

예시

CommonJS usage

TypeScript typings (for intellisense / autocomplete)이 가능하게 하기 위해 CommonJS를 사용할 때는 아래 예시처럼 require()를 import한다.

const axios = require('axios').default;

// axios.<method>를 쓰게 되면 autocomplete과 parameter typings의 사용이 가능해진다.

GET request를 수행하는 예제

const axios = require('axios');

// Make a request for a user with a given ID
axios
  .get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // 항상 실행된다.
  });

// 선택적으로 위의 요청을 아래와 같이 수행할 수 있다.
axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행된다.
  });

// async/await를 쓰고 싶다면 'async' 키워드를 function/method의 바깥쪽에 붙여준다.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

---

POST Requests

Axios를 가지고 POST request를 요청하는 방법

POST request를 수행하는 예제

axios
  .post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone',
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

여러 요청을 동시에 수행하는 예제

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {
  const acct = results[0];
  const perm = results[1];
});

---

Axios API

request는 관련된 config를 통해 axios로 전달된다.

axios(config)

// POST request를 보낸다.
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone',
  },
});

// node.js remote image에 대한 GET request
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream',
}).then(function (response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'));
});

axios(url[, config])

// Send a GET request (default method)
axios('/user/12345');

Request method aliases

편의를 위해 지원되는 모든 요청 메서드에 대한 alias가 제공된다. alias method인 url, method, data 속성을 쓸 때는 config에 작성할 필요없다.

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

---

The Axios Instance

Creating an instance

custom config를 통해 axios의 새로운 인스턴스를 생성할 수 있다.

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' },
});

Instance methods

사용 가능한 인스턴스 메소드는 아래와 같다. 명시된 config는 instance config와 병합된다.

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

---

References
Axios