学习内容:

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]) => {}等价,两种方法是不是就完全相同了呢?

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐