使用Typescript重构axios(三十一)——添加axios.all和axios.spread

1.使用Typescript重构axios(一)——写在最前面
2.使用Typescript重构axios(二)——项目起手，跑通流程
3.使用Typescript重构axios(三)——实现基础功能：处理get请求url参数
4.使用Typescript重构axios(四)——实现基础功能：处理post请求参数
5.使用Typescript重构axios(五)——实现基础功能：处理请求的header
6.使用Typescript重构axios(六)——实现基础功能：获取响应数据
7.使用Typescript重构axios(七)——实现基础功能：处理响应header
8.使用Typescript重构axios(八)——实现基础功能：处理响应data
9.使用Typescript重构axios(九)——异常处理：基础版
10.使用Typescript重构axios(十)——异常处理：增强版
11.使用Typescript重构axios(十一)——接口扩展
12.使用Typescript重构axios(十二)——增加参数
13.使用Typescript重构axios(十三)——让响应数据支持泛型
14.使用Typescript重构axios(十四)——实现拦截器
15.使用Typescript重构axios(十五)——默认配置
16.使用Typescript重构axios(十六)——请求和响应数据配置化
17.使用Typescript重构axios(十七)——增加axios.create
18.使用Typescript重构axios(十八)——请求取消功能：总体思路
19.使用Typescript重构axios(十九)——请求取消功能：实现第二种使用方式
20.使用Typescript重构axios(二十)——请求取消功能：实现第一种使用方式
21.使用Typescript重构axios(二十一)——请求取消功能：添加axios.isCancel接口
22.使用Typescript重构axios(二十二)——请求取消功能：收尾
23.使用Typescript重构axios(二十三)——添加withCredentials属性
24.使用Typescript重构axios(二十四)——防御XSRF攻击
25.使用Typescript重构axios(二十五)——文件上传下载进度监控
26.使用Typescript重构axios(二十六)——添加HTTP授权auth属性
27.使用Typescript重构axios(二十七)——添加请求状态码合法性校验
28.使用Typescript重构axios(二十八)——自定义序列化请求参数
29.使用Typescript重构axios(二十九)——添加baseURL
30.使用Typescript重构axios(三十)——添加axios.getUri方法
31.使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
32.使用Typescript重构axios(三十二)——写在最后面（总结）

项目源码请猛戳这里!!!

1. 前言

在官方 axios 中，还提供了 axios.all 和 axios.spread 这两个方法，这两个方法主要是为了执行多个并发请求，官方文档中，它们的用法示例如下：

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

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 两个请求都完成后
  }));

从用法示例中可以看出：

axios.all 方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个 promise 对象，当数组中所有请求均已完成时，执行 then 方法。在 then 方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是 axios.all 方法中每个请求返回的响应。

2. 窥探本质

2.1 axios.all本质

从 axios.all 方法的使用方式以及使用形式上看，是不是跟 Promise.all 方法很相似？对，没错， axios.all 就是给 Promise.all 方法换了个名字而已，我们看看 Promise.all 方法是如何使用的，如下：

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

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

Promise.all([getUserAccount(), getUserPermissions()])
  .then(([acct,perms]) => {
    // 两个请求都完成后
  }));

我们可以看到， axios.all 方法与 Promise.all 方法是一模一样的，不管是使用方式还是传入的参数都是一模一样的。 axios.all 的本质搞明白以后我们再看看 axios.spread 的本质。

2.2 axios.spread本质

上文说了， axios.all 方法与 Promise.all 方法是一模一样的，唯一看起来不同的地方就是 then 方法，我们先来比较这两个 then 方法中的内容：

 // axios.all的then
axios.spread((acct, perms) => {})

// Promise.all的then
([acct,perms]) => {}

我们可以看到， Promise.all 的 then 方法里面是个函数，函数的参数是所有请求的响应组成的数组；而 axios.all 的 then 方法里面调用了 axios.spread 方法， axios.spread 方法接收一个函数作为参数，该参数函数的参数也是所有请求的响应，既然上文说了 axios.all 方法与 Promise.all 方法是一模一样的，那么我们只需想办法再让两个 then 方法相同即可。也就是说我们创建一个 axios.spread 方法并且让 axios.spread((acct, perms) => {}) 的返回值与 ([acct,perms]) => {} 等价即可。

OK，搞清楚这两个方法的本质以后，我们就来着手实现它们。

3. 方法接口类型定义

实现这两个方法之前，我们先在 src/types/index.ts 中的 AxiosStatic 中为这两个方法添加接口类型，如下：

 export interface AxiosStatic extends AxiosInstance {
  // 新增
  all<T>(promises: Array<T | Promise<T>>): Promise<T[]>;
  spread<T, R>(callback: (...args: T[]) => R): (arr: T[]) => R;
}

添加好之后接下来就来实现这两个方法。

4. 方法实现

这两个方法是挂载到 axios 混合对象上的，那么我们就在 src/axios.ts 中实现这两个方法，并将其挂载到 axios 上，如下：

 axios.all = function(promises) {
  return Promise.all(promises);
};
axios.spread = function(callback) {
  return function wrap(arr) {
    return callback.apply(null, arr);
  };
};

根据第2章的分析：

axios.all 方法就是对 Promise.all 方法进行了一层包装，本质上是一模一样的，没有任何额外的逻辑，所以调用 axios.all 方法就是调用了 Promise.all 方法。对于 axios.spread 方法，根据我们的分析结果只需让 axios.spread((acct, perms) => {}) 的返回值与 ([acct,perms]) => {} 等价即可。

OK，这样就把这两个方法实现完毕了，接下来我们来编写 demo 来测试下效果如何。

5. demo编写

在 examples 目录下创建 allAndSpread 目录，在 allAndSpread 目录下创建 index.html :

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>allAndSpread demo</title>
  </head>
  <body>
    <script src="/__build__/allAndSpread.js"></script>
  </body>
</html>

接着再创建 app.ts 作为入口文件：

 import axios from "src/axios";

function getA() {
  return axios.get("/api/allAndSpreadA");
}

function getB() {
  return axios.get("/api/allAndSpreadB");
}

axios.all([getA(), getB()]).then(
  axios.spread(function(resA, resB) {
    console.log(resA.data);
    console.log(resB.data);
  })
);

axios.all([getA(), getB()]).then(([resA, resB]) => {
  console.log(resA.data);
  console.log(resB.data);
});

接着在 server/server.js 添加新的接口路由：

 // 添加axios.all和axios.spread方法
router.get("/api/allAndSpreadA", function(req, res) {
  res.json({
    data: "allAndSpreadA"
  });
});
router.get("/api/allAndSpreadB", function(req, res) {
  res.json({
    data: "allAndSpreadB"
  });
});

最后在根目录下的 index.html 中加上启动该 demo 的入口：

 <li><a href="examples/allAndSpread">allAndSpread</a></li>

OK,我们在命令行中执行：

 # 同时开启客户端和服务端
npm run server | npm start

接着我们打开 chrome 浏览器，访问 http://localhost:8000/ 即可访问我们的 demo 了，我们点击 allAndSpread ，就可以看到两个请求都已经正常发出，并且打开 F12 中的控制台可以看到两个请求的响应都已经返回了。

OK，以上就是 axios.all 和 axios.spread 方法实现。

（完）

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did223405

更新时间：2023-05-08 阅读：49次