原文连接

安装 axios

官网这里还提供了两种CDN接入的方式

• <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
• <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  但我估计这是国外的， 速度上可能不及国内源, 我在 bootcdn 上找了一个 版本 0.19.2
• <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

.

在项目中导入 axios

• ES6语法引入 import axios from 'axios'

• CommonJS 引入 const axios = require('axios');

• 官网在这里好像更推荐使用 CommonJS 去引入， 原因是这样做可以得到由TypeScript的语法支持，用于自动代码提示

.

简单的使用 axios

• 方式一 ： **axios( config ) **

config : 针对于请求的一些配置选项， 该参数为一个对象

axios({
  // method 请求类型
  method: 'post',
  // 请求路径
  url: '/user/12345',
  // post 携带数据
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

• 方式二 ： axios(url)

也可以省略 config 对象， 直接填入一个url。 但在此情况下就只能发送最简单的 get 请求了

axios('/user/12345');

由于请求的类型有很多种， 为此axios提供了一整套用于不同请求的语法糖

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

这样在其config配置中可以省略 method 属性

需要注意的是 在使用不同请求的时候 携带参数的方式是不同的， 例如 get ， 需要在config 中使用 params 属性传参
，post、put、patch方法则需要使用data属性

axios发送请求后返回的是一个promise对象， 我们可以直接使用then获取其返回数据， 类似下面这样

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

如果你愿意， 官网这里也推荐使用 async/await

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

官网这里提示： 如果使用了async/await的话需要注意有些浏览器并不支持该语法。 例如 IE 和 一些老版本的浏览器

.

config 请求配置项

下面列出config对象的可用配置项， 其中只有 url 是必填项。 如果没有指定method， 则默认为get请求

.

响应数据包

当我们的请求发出后，服务器响应返回一些数据。该数据会被axios封装成一个大对象。我们可以使用then拿出这些数据

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

其中 data 属性则是真正服务器传回的数据， 其余属性则是axios封装的一些属性。 具体请看下表

.

执行多个并发请求

1. Promise.all

最初官网推荐了 Promise.all 方法 ( 现已不推荐使用 )， 并举例如下

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

2. axios.all

但后来， axios也推出了自己的 all 方法 axios.all , 并使用 axios.spread 接收其数据

它和 promise.all 的使用方法差不多 。

axios.all(
    [
        axios.get('/test1'),
        axios.get('/test2')
    ]
).then(
    axios.spread( (test1Res,test2Res) => {
        console.log(test1Res,test2Res)
    })
)

.

全局默认配置

当我们总是向同一个服务器发送请求的时候， config项中的baseURL永远都是同一个， 类似的还有一些其他属性， 如超时时间， 响应头信息。

该配置适用于给所有请求添加一些相同的config项

配置全局默认配置项需要使用引入的axios对象身上的defaults对象

import axios from 'axios'

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

defaults 对象拥有几乎完整的config属性。 将会和所有请求项中的config合并（类似 Object.assign 操作）完成属性的覆盖