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ạ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
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/awaitlà 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.
