并行请求多个异步接口

Posted 2021-09-04 现刻

当打开页面需要很多初始信息时，需于调用好几个接口，如果采用异步嵌套方式调研会严重延长页面的打开时间。页面打开的时间是所有接口打开时间的和。

所以需要并行请求全部接口，然后只需要等待最慢的接口返回。那么页面打开的时间就是最慢的接口返回数据的时间。

方案1:
先同时请求全部接口，然后开始 await。

const userInfoFc = this.getUser();
const authInfoFc = this.getAuth();
const orgInfoFc = this.getOrgTree();

// await命令后面是一个 Promise 对象

const userInfo = await userInfoFc;
const authInfo = await authInfoFc;
const orgInfo = await orgInfoFc;

方案2

let [userInfo, authInfo] = await Promise.all([this.getUser(), this.getAuth()]);

PS:
Promise.all 如果开发中，all 有一个失败了，如何使程序不走人catch中?

let [userInfo, authInfo] = await Promise.all([this.getUser(), this.getAuth()].map(p=>p.catch(e=>e)));

方案3

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, \'foo\'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result)));

// expected output:
// "fulfilled"
// "rejected"

MDN官方文档