async/await 里怎么正确处理多个异步请求的加载状态？

成立（打工版）提问于 2026-03-08 23:13:19 阅读 7

前端

我用 async/await 写了个函数同时发两个请求，想在都完成后再更新页面。但 loading 状态老是控制不好，有时候一个完成了就提前关了 loading，结果第二个还没回来。试过用 Promise.all，但样式还是闪一下。

这是我的加载动画 CSS：

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

有没有办法确保两个请求都结束再隐藏这个 loading 动画？

我来解答赞 1 收藏

反馈

1 条解答

翠翠酱~ Lv1

你这情况我遇到过，就是多个异步请求完成时机不一致导致的。改一下就行，用Promise.all配合async/await就能解决。

关键点是把loading状态的控制和请求分开，先统一处理所有请求，最后再统一更新状态。比如：

async function fetchData() {

  showLoading(); // 开始loading

  

  try {

    // 用Promise.all等两个请求都完成

    const [data1, data2] = await Promise.all([

      fetch('api/request1'),

      fetch('api/request2')

    ]);

    

    // 两个都完成后再处理数据

    processData(data1, data2);

  } catch (error) {

    console.error('请求出错', error);

  } finally {

    hideLoading(); // 无论成功失败最后都关闭loading

  }

}



// 简单控制loading的示例

function showLoading() {

  document.querySelector('.loading').style.display = 'inline-block';

}

function hideLoading() {

  document.querySelector('.loading').style.display = 'none';

}

这样就不会出现loading闪动了。你的CSS没问题，主要是控制显示的逻辑要放在finally里确保执行。如果还有问题可能是你DOM操作的问题，可以检查下hideLoading的实现。

2026-03-08 23:19