关键是要并行发起请求再统一 await：先调用 fetchUser()、fetchPosts()、fetchConfig() 获取 Promise，再用 await Promise.all([...]) 并发等待；避免逐个 await 导致串行耗时叠加；可选 Promise.allSettled 处理部分失败，配合 try/catch 控制 loading 与错误兜底。

用 async/await 实现页面初始化时多接口并行加载，关键不是逐个 await，而是先发起所有请求（返回 Promise），再用 await Promise.all([...]) 统一等待结果。

不要串行 await，避免阻塞

错误写法：每个接口都单独 await，会变成串行请求，总耗时是各接口耗时之和。

async function initPage() {
  const user = await fetchUser();     // 等 800ms
  const posts = await fetchPosts();   // 再等 1200ms
  const config = await fetchConfig(); // 再等 400ms
  // 总耗时 ≈ 2400ms
}

正确做法：Promise.all 并行发起 + await 统一收口

把所有接口调用（不带 await）先执行，得到一组 Promise，再用 Promise.all 并发等待。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

async function initPage() {
  // 同时发起请求（不 await！）
  const userPromise = fetchUser();
  const postsPromise = fetchPosts();
  const configPromise = fetchConfig();

  // 并行等待全部完成
  const [user, posts, config] = await Promise.all([
    userPromise,
    postsPromise,
    configPromise
  ]);

  // 此时三者数据均已就绪，总耗时 ≈ 最慢的那个（比如 1200ms）
  renderPage({ user, posts, config });
}

处理部分失败：用 Promise.allSettled

如果某个接口失败不想中断整体流程（比如用户信息失败但文章和配置仍要展示），改用 Promise.allSettled。

立即学习“Java免费学习笔记（深入）”；

async function initPage() {
  const results = await Promise.allSettled([
    fetchUser(),
    fetchPosts(),
    fetchConfig()
  ]);

  const [userRes, postsRes, configRes] = results;

  const user = userRes.status === 'fulfilled' ? userRes.value : null;
  const posts = postsRes.status === 'fulfilled' ? postsRes.value : [];
  const config = configRes.status === 'fulfilled' ? configRes.value : {};

  renderPage({ user, posts, config });
}

进阶：加 loading 状态与错误兜底

实际项目中建议包裹 try/catch，并在开始/结束时控制 UI 状态。

• 页面加载前显示 skeleton 或 loading 指示器
• Promise.all 中任一 reject 会导致整个 await 抛错，需 catch 捕获
• 可对不同错误做分级处理（如网络错误重试，业务错误静默降级）

async function initPage() {
  showLoading(true);
  try {
    const [user, posts, config] = await Promise.all([
      fetchUser().catch(() => null),
      fetchPosts(),
      fetchConfig().catch(() => ({}))
    ]);
    renderPage({ user, posts, config });
  } catch (err) {
    showError('页面初始化失败，请稍后重试');
  } finally {
    showLoading(false);
  }
}