Giới thiệu
Axios là thư viện JavaScript thông dụng giúp bạn có thể thự hiện các request HTTP một cách dễ dàng. Có thể hoạt động trên cả hai platform Browser và Node.js
Hỗ trợ tất cả browsers hiện đại, bao gồm cả IE8 và cao hơn.
Thư viện thuộc dạng promise-based, và bạn có thể viết code async/await để thực hiện request XHR một cách dễ dàng.
Sử dụng Axios có một vài lợi thế hơnFetch API:
- supports các browser cũ
- có cách để hủy request
- có cách để set timeout response
- được build để chống CSRF
- support upload progress
- thực hiện chuyển đội dữ liệu JSON một cách tự động
- hoạt động trên Node.js
Installation
Axios có thể cài đặt thông qua npm:
npm install axios
hoặc yarn:
yarn add axios
hoặc đơn giản chỉ là nhúng src script thông qua unpkg.com:
https://unpkg.com/axios/dist/axios.min.js
The Axios API
Bạn có thể gọi request HTTP từ đối tượng axios
axios({
url: 'https://dog.ceo/api/breeds/list/all',
method: 'get',
data: {
foo: 'bar'
}
})
nhưng để tiện hơn, bạn thường sẽ sử dụng
axios.get()
axios.post()
(giống như trong jQuery, bạn sẽ sử dụng $.get()
và $.post()
thay vì $.ajax()
)
Axios cung cấp phương thức cho tất cả HTTP verbs, tuy ít phổ biến những vẫn được sử dụng:
axios.delete()
axios.put()
axios.patch()
axios.options()
Nó cũng cung cấp phương thức để get HTTP headers từ request.
GET requests
Một cách thuận tiện nhất để dùng Axios là sử dụng syntax async/await (ES2017).
Ví dụ Node.js này sẽ queries đếnDog API để lấy toàn bộ danh sách các giống chó, sử dụngaxios.get()
, và đếm chúng:
const axios = require('axios')
const getBreeds = async () => {
try {
return await axios.get('https://dog.ceo/api/breeds/list/all')
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = await getBreeds()
if (breeds.data.message) {
console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)
}
}
countBreeds()
Nếu bạn không muốn sử dụng async/wait, bạn có thể dùng syntax Promises:
const axios = require('axios')
const getBreeds = () => {
try {
return axios.get('https://dog.ceo/api/breeds/list/all')
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = getBreeds()
.then(response => {
if (response.data.message) {
console.log(
`Got ${Object.entries(response.data.message).length} breeds`
)
}
})
.catch(error => {
console.log(error)
})
}
countBreeds()
Thêm param vào request Get
Phương thức GET có thể chứa tham số trong URL, chẳng hạn như: https://site.com/?foo=bar
.
Với Axios bạn có thể thực hiện hàm gọi đơn giản như sau:
axios.get('https://site.com/?foo=bar')
hoặc bạn có thể sử dụng thuộc tính params
trong options:
axios.get('https://site.com/', {
params: {
foo: 'bar'
}
})
POST Requests
Thực hiện POST request cũng giống như GET request, nhưng thay vì dùng axios.get
, bạn sẽ dùng axios.post:
axios.post('https://site.com/')
Và đối tượng có thể chứa thêm tham số POST
axios.post('https://site.com/', { foo: 'bar' })
Một chút thủ thuật nhỏ hy vọng sẽ giúp ích cho các bạn !
Y Sa
Nguồn: https://medium.freecodecamp.org/simple-http-requests-in-javascript-using-axios-272e1ac4a916