0. 系列文章

項目源碼請猛戳這里!!!

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方法實現。

（完）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用axios.all和axios.spread處理並發請求 axios解決高並發——axios.all與axios.spread Axios 類似於for循環發送批量請求{：axios.all axios.spread}。 axios.all is not a function 使用Typescript重構axios(二十一)——請求取消功能：添加axios.isCancel接口使用Typescript重構axios(二十九)——添加baseURL 使用Typescript重構axios(二十三)——添加withCredentials屬性使用Typescript重構axios(十七)——增加axios.create接口 axios.all()解決並發請求的問題用axios.all處理並發請求