axios 简明示例

107 阅读1分钟

什么是 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.allaxios.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()