Axios如何实现同步请求（async与await）

Axios介绍

Axios是一个基于promise的网络请求库，可以用在浏览器和 node.js中。

Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本。

主要特点：
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

在axios中，所有的请求都是异步发送的。所以单独用axios是实现不了同步的，需要结合async与await关键字使用。

axios应用

axios发起get请求示例一：

const axios = require("axios");
// 向给定ID的用户发起请求
axios.get("/user?ID=12345")
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

axios发起get请求示例二：

// 上述请求也可以按以下方式完成（可选）
axios.get("/user", {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

axios发起post请求：

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用async/await用法，实现同步请求

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

说明：使用async/await修饰的方法getUser内部为同步逻辑，即只有当请求响应回来之后，才会继续之后的console.log(response)或console.error(error)打印操作。

注意：调用getUser()方法的地方仍为异步操作，并不会因为getUser()方法内部为同步请求而阻塞当前进程。例如：

while循环中调用getUser方法：

let _this = this;
let i = 0;
while (i < 4) {
  console.log("请求" + i + "开始...");
  _this.getUser();
  console.log("请求" + i + "结束");
  i++;
}

打印日志为：

请求0开始...
请求0结束
请求1开始...
请求1结束
请求2开始...
请求2结束
请求3开始...
请求3结束
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}

可以看到循环里面，第一个请求响应回来之前，之后的请求就接着执行；如果我们希望整个循环接口请求串行执行，即第一个请求响应回来之后，再发起第二次请求，则我们同样需要使用async和await来对while循环进行修饰，保证while循环里面的代码串行执行，达到我们想要的目的。代码如下：

// 同步循环请求
(async() => {
  let j = 0;
  while (j < this.form.requestCount) {
    console.log('请求' + j + "开始...");
    await _this.getUser();
    console.log('请求' + j + "结束");
    j++;
  }
})();

打印日志如下：

请求0开始...
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
请求0结束
请求1开始...
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
请求1结束
请求2开始...
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
请求2结束
请求3开始...
{msg: '操作成功', code: 200, permissions: Array(1), roles: Array(1), user: {…}}
请求3结束

如上所示，即达到了我们接口串行执行的目的。