react组件初始化接口请求有多个异步依赖参数

Posted 2023-04-06

参考技术A

一个列表组件，初始化请求列表接口getData，支持异步参数keyword和codes。初始化时，出现重复请求列表接口问题

1.useState无法如setState处理异步问题
2.useEffec如何区分用户行为和初始态
3.React Hooks useEffect多个依赖数据批量操作

常规解题思路
问题：初始化时keyword和codes异步更新，会触发两次接口请求

基于防抖、useEffect，封装函数useBatchEffect支持批量更新操作

使用

或者可以直接使用 ahooks 的 useDebounceEffect

建议使用react hooks封装useBatchEffect监听接口依赖数据，逻辑简单，可读性和可维护性较好

https://juejin.cn/post/6994085055559630879

并行请求多个异步接口

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

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

方案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官方文档