Axios là gì? What is Axios?

Axios là một thư viện HTTP Client dựa trên Promise dành cho node.js và trình duyệt. Nó có tính đẳng hình (tức là cùng codebase có thể chạy trong cả trình duyệt và node.js). Ở phía server thì nó sử dụng native module http trong node.js, còn ở phía client (trình duyệt) thì nó sử dụng XMLHttpRequest.

Trang web offical Axios: 

https://axios-http.com/vi/docs/intro

Tính năng

• Tạo request từ trình duyệt bằng XMLHttpRequest
• Tạo request từ node.js bằng http
• Hỗ trợ Promise API
• Đón chặn request và response
• Biến đổi dữ liệu request và response
• Bãi bỏ request
• Tự động chuyển đổi cho dữ liệu JSON
• Hỗ trợ phía client bảo vệ chống lại XSRF

Cài đặt

Sử dụng npm:

$ npm install axios

Sử dụng bower:

$ bower install axios

Sử dụng yarn:

$ yarn add axios

Sử dụng jsDelivr CDN:

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

Sử dụng unpkg CDN:

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

Bài demo Axios :

Lưu ý: Cách dùng với CommonJS

Để có được định nghĩa kiểu dữ liệu TypeScript (cho intellisense / autocomplete) trong khi sử dụng phép import của CommonJS (tức require()), hãy sử dụng phương pháp sau đây:

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

// Giờ axios.<phương thức> sẽ cung cấp autocomplete và định nghĩa kiểu dữ liệu tham số

Ví dụ:

Gửi đi một GET request

const axios = require('axios');

// Tạo một request để truy xuất người dùng ứng với ID cho sẵn:
axios.get('/user?ID=12345')
  .then(function (response) {
    // xử trí khi thành công
    console.log(response);
  })
  .catch(function (error) {
    // xử trí khi bị lỗi
    console.log(error);
  })
  .then(function () {
    // luôn luôn được thực thi
  });

// Cái request bên trên cũng có thể được làm bằng cách sau, tùy ý
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // luôn luôn được thực thi
  });  

// Nếu muốn sử dụng async/await thì viết như sau
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

LƯU Ý: async/await là một phần của ECMAScript 2017, không được hỗ trợ trong Internet Explorer và những trình duyệt cũ, nên cần chú ý khi sử dụng.

Bản tham khảo Axios API

Có thể truyền cấu hình có liên quan vào axios để tạo ra request.

axios(config)

// Gửi một POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    lastName: 'Lý'
    firstName: 'Thường Kiệt',
  }
});

// Truy xuất ảnh từ xa bằng GET request trong node.js
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url[, config])

// Gửi một GET request (chức năng mặc định)
axios('/user/12345');

Alias cho phương thức request

Để cho tiện, thư viện đã cung cấp sẵn alias cho tất cả phương thức request được hỗ trợ.

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]])

LƯU Ý: Khi sử dụng các phương thức alias, các thuộc tính url, method, và data đều không cần phải được chỉ định trong cấu hình.