码迷,mamicode.com
首页 > 移动开发 > 详细

axios解决高并发——axios.all与axios.spread

时间:2021-02-19 13:38:48      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:read   个数   高并发   组成   相同   官方文档   log   blog   方式   

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

axios解决高并发——axios.all与axios.spread

标签:read   个数   高并发   组成   相同   官方文档   log   blog   方式   

原文地址:https://www.cnblogs.com/vickylinj/p/14411354.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!