axios解決高並發——axios.all與axios.spread

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((acct, perms) => {})的返回值與([acct,perms]) => {}等價。

詳細見：https://blog.csdn.net/aa_mmnn/article/details/105405893