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

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

上一篇:记录一下vue-cli3搭建项目后遇到axios请求跨域的问题


下一篇:[nginx] Refused to load the font 'data:application/x-font-woff;'Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.