axios.all 与 axios.spread 的实质

学习内容：

axios.all 与 axios.spread 的实质

---

学习笔记：

axios.all 与 axios.spread 的实质

• 1、axios.all 的本质

我们从上一篇的学习中可以看到：
针对 axios.all 方法，从它的使用方式以及使用形式上看，与 Promise.all方法很相似。
那么我们了解一下 Promise.all 方法是如何使用的：

function getDeptAccount() {
  return axios.get('/sys/dept/123');
}

function getDeptPermissions() {
  return axios.get('/sys/dept/123/permissions');
}

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

注：acct   为方法一 getDeptAccount()  的返回值
    perms  为方法二 getDeptPermissions()  的返回值

function getDeptAccount() {
  return axios.get('/sys/dept/123');
}

function getDeptPermissions() {
  return axios.get('/sys/dept/123/permissions');
}

Promise.all([getDeptAccount(), getDeptPermissions()])
  .then(([acct,perms]) => {
    // 两个请求都完成后
  }));
  
  注：acct   为方法一 getDeptAccount()  的返回值
    perms  为方法二 getDeptPermissions()  的返回值

从上述的例子中我们可以看到，axios.all方法与Promise.all方法是几乎是一模一样的。
（不论是 使用方式 还是 传入的参数）

• 2、 axios.spread本质

上面我们发现，axios.all方法与Promise.all方法几乎是一模一样的，唯一不同的地方就是then方法中包含的内容有所不同，
那么我们先来比较这两个then方法中的内容：

// 1、axios.all的then

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

axios.spread((acct, perms) => {})

注：acct   为方法一 getDeptAccount()  的返回值
    perms  为方法二 getDeptPermissions()  的返回值

// 2、Promise.all的then

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

([acct,perms]) => {}

注：acct   为方法一 getDeptAccount()  的返回值
    perms  为方法二 getDeptPermissions()  的返回值

总结：
1、Promise.all的then方法里面是个函数，函数的参数是所有请求的响应组成的数组；
2、axios.all的then方法里面调用了axios.spread方法，axios.spread方法接收一个函数作为参数，该参数函数的参数也是所有请求的响应。

**疑问：**那么如果我们创建一个axios.spread方法并且让axios.spread((acct, perms) => {})的返回值与([acct,perms]) => {}等价，两种方法是不是就完全相同了呢？