React+Ts项目,异步接口如何同步执行

React+TS函数组件,要实现首屏加载调用getVersionsData()接口获取到一个数组对象,该数组中第一个对象(不固定)作为getHeroCovsData()接口的参数传给后端从而得到想要的数据(目前我这种写法虽然可以实现,但是是异步执行这里接口(getHeroCovsData)会被调用多次并且前几次拿到的数据是undefined导致接口(getHeroCovsData)调用失败,想要实现getVersionsData调用以后在调用getHeroCovsData接口,也就是实现同步),要怎么实现?
image.png

阅读 6.5k
3 个回答

首先你写的位置不正确
你用的hooks

hooks 中只要有内容变化 state or props 就会不断执行 。所以建议你这样写

useEffect(() => {
dispatch(vsrsionActions.getVersionData());
}, [])

// 第二个effect加入你需要的数据的依赖, 这样就能保证执行
useEffect(() => {
  if (vsrsionActions.getVersionData()返回的数据) {
    getHeroCovsData();
  }
}, [这里放入vsrsionActions.getVersionData()返回的数据])

还可以改造dispatch 增加callback,当执行完第一个以后 通过callback 执行 后续的操作,怎么增加callback,自己百度,都有的。

提个建议,提问题不要贴图片,复制代码,方便回答的人粘贴

方法用 async
执行的地方加上 await
不可以吗

你是用了redux-thunk吗?dispatch一个thunk action会返回一个promise,await它就行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题