使用 useEffect 调用多个异步函数答案

【问题标题】：Call multiple async functions using useEffect使用 useEffect 调用多个异步函数
【发布时间】：2021-11-26 04:12:02
【问题描述】：

我有以下调用 api 的函数

  useEffect(() => {
    loadMarkets();
  }, []);

  async function loadMarkets() {
    const marketInformation = await frService.getMarketInfo();
    addMarketInfo(marketInformation.response.data);
  }

我想给loadBooks()打一个类似的电话。如果我不介意哪个方法先出现，我可以像下面这样调用它，还是应该将其包装在 1 个异步函数中/将其包装在 Promise 中？

  useEffect(() => {
    loadMarkets();
    loadBooks();
  }, []);

  async function loadMarkets() {
    const marketInformation = await frService.getMarketInfo();
    addMarketInfo(marketInformation.response.data);
  }

  async function loadBooks() {
    ....

【问题讨论】：

标签： reactjs asynchronous use-effect

【解决方案1】：

    loadMarkets();
    loadBooks();

因为这些函数都以async 关键字为前缀，所以这些都是promise。 loadBooks 将在 loadMarkets 完成之前被触发。

简单的答案，是的，你可以按照你写的那样做，但是我会尝试用类似的东西来捕捉错误

loadMarkets().catch(doSomethingIfThereIsAnError)

其中doSomethingIfThereIsAnError 将是一个执行某些操作的函数...

【讨论】：

【解决方案2】：

这并不重要，因为它们都是async。在组件的初始渲染期间，useEffect 将调用两个async 函数。如果您需要检查首先调用哪个 api 端点以及执行需要多少时间，您可以打开浏览器开发工具并检查网络选项卡。

【讨论】：