什么是 aixos
axios 是一个基于 Promise 的 HTTP 客户端,可以用来发送 HTTP 请求。它可以在浏览器和 node.js 中使用,并支持跨域请求。
安装 axios
npm install axios
使用 axios
我们可以直接使用它来发送 ajax 请求, 示例如下
```js
import axios from 'axios'
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
// get 请求不包含请求体,所以这里使用 params 代替 data
// 如果 包含了 data 则会被忽略
axios({
method: 'get',
url: '/user',
params: {
ID: 12345
}
})
axios 也支持别名的写法
axios.request({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
axios.get('/user/12345')
axios.delete('/user/12345')
axios.head('/user/12345')
axios.options('/user/12345')
axios.post('/user/12345', {
firstName: 'Fred',
lastName: 'Flintstone'
})
axios.put('/user/12345', {
firstName: 'Fred',
lastName: 'Flintstone'
})
axios.patch('/user/12345', {
firstName: 'Fred',
lastName: 'Flintstone'
})
在一些场景下我们可能希望发送并发请求,比如说同时获取用户的的账号信息和权限信息。
这个时候我们就可以使用 axios 的 axios.all 和 axios.spread
axios.all 接受一个请求数组作为参数,并返回一个新的 Promise,在所有请求都完成后才会 resolve。
axios.spread 接受一个回调函数,并把每个请求的响应数组作为参数传递给该回调函数。
下面是一个例子,展示了如何使用 axios 的并发请求功能。
function getUserAccount() {
return axios.get('/user/12345')
}
function getUserPermissions() {
return axios.get('/user/12345/permissions')
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求均已完成
}))
// 当然你也可以自己解构而不用 axios.spread
axios.all([getUserAccount(), getUserPermissions()])
.then(([acct, perms]) =>{
// 两个请求均已完成
})
或者也可以使用 asyc / await 来简化代码
async function getUserInfo() {
const [acct, perms] = await axios.all([getUserAccount(), getUserPermissions()])
// 两个请求均已完成
}
getUserInfo()