并行请求多个异步接口

Question

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

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

方案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)));

Answer 1

Promise.allSettled 更适合你，具体文档可看MDN

Answer 2

ES2020 新 API Promise.allSettled 就是为了解决 Promise.all 一个挂了直接 reject 问题而生的。

低版本引入 polyfill 或用 babel 转译就好了。