Promise.all优化异步请求性能的实践指南

1. 为什么需要关注异步请求性能优化

在现代Web应用开发中，数据获取是核心环节之一。一个典型的数据看板页面往往需要同时加载多个数据源：核心指标、业务线分布、趋势图表等。如果采用传统的串行请求方式，用户需要等待所有请求依次完成才能看到完整内容，这直接影响了首屏渲染时间和用户体验。

以一个实际项目中的性能数据为例：

• 核心指标接口平均耗时200ms
• 业务线数据接口平均耗时300ms
• 分布数据接口平均耗时250ms
• 趋势数据接口平均耗时400ms

如果采用串行请求方式，总耗时将达到1150ms（200+300+250+400）。而通过Promise.all实现并行请求后，总耗时仅取决于最慢的单个请求（400ms），性能提升近3倍。这种优化对于追求极致用户体验的应用来说至关重要。

提示：现代浏览器通常支持6个同域名下的并发HTTP请求，这意味着合理利用并行请求不会导致额外的性能负担。

2. Promise.all的工作原理与实现

2.1 基本语法解析

Promise.all是JavaScript中处理多个Promise的静态方法，它接收一个Promise数组作为参数，返回一个新的Promise。当所有输入的Promise都成功解决（resolve）时，返回的Promise才会解决，解决值是一个包含所有Promise解决值的数组，顺序与输入数组一致。

javascript复制const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 输出: [3, 42, "foo"]
});

2.2 并行请求实现模式

在实际项目中，我们通常会这样组织代码：

javascript复制// 定义各数据请求函数
const fetchCoreIndicators = (params) => axios.get('/api/core-indicators', { params });
const fetchBusinessLineData = (params) => axios.get('/api/business-line', { params });
const fetchPieData = (params) => axios.get('/api/pie-data', { params });
const fetchTrendData = (params) => axios.get('/api/trend', { params });

// 使用Promise.all并行请求
const loadDashboardData