在useEffect中调用多个异步函数的正确实现方式咨询

问题解答 #

你写的调用方式完全可行，不需要额外封装到同一个异步函数，也不需要用Promise额外包裹。

async函数执行时遇到await会立即返回 pending 状态的Promise，不会阻塞后续代码运行。你在useEffect中先后调用两个异步函数时，两个接口请求会几乎同时发起，各自独立执行后续的状态更新逻辑，刚好匹配你不关心执行先后顺序的需求。

可选优化点 #

如果需要规避常见的风险，可以补充两个处理：

• 给两个异步函数分别加上try/catch块，单独处理各自的请求报错，避免未捕获的Promise异常上报
• 加组件挂载状态标记，避免组件卸载后请求才返回，触发已卸载组件的状态更新导致内存泄漏

优化参考代码如下：

useEffect(() => {
  // 挂载状态标记，避免卸载后更新状态
  let isMounted = true;

  async function loadMarkets() {
    try {
      const marketInformation = await frService.getMarketInfo();
      if (isMounted) {
        addMarketInfo(marketInformation.response.data);
      }
    } catch (e) {
      // 自定义市场信息加载失败的处理逻辑
      console.error('加载市场信息失败:', e);
    }
  }

  async function loadBooks() {
    try {
      // 你原有的loadBooks业务逻辑
      const booksInfo = await frService.getBooksInfo();
      if (isMounted) {
        addBooksInfo(booksInfo.response.data);
      }
    } catch (e) {
      // 自定义书籍信息加载失败的处理逻辑
      console.error('加载书籍信息失败:', e);
    }
  }

  loadMarkets();
  loadBooks();

  // 卸载时修改标记位
  return () => {
    isMounted = false;
  };
}, []);

如果你后续有需要等两个请求全部完成后再执行统一操作的场景（比如关闭全局加载状态），再用Promise.all包裹两个调用即可，当前场景下不需要做额外改造。

内容的提问来源于stack exchange，提问作者lost9123193