axios并发请求终极指南：Promise.all vs axios.all性能对比与最佳实践

前端并发请求的深度解构：从Promise.all到现代异步模式实战

在构建现代复杂Web应用时，一个页面往往需要同时向多个后端服务发起数据请求。想象一下电商首页的场景：用户一进入页面，需要立刻加载用户信息、推荐商品列表、促销活动、购物车数量、个性化广告等多个维度的数据。如果这些请求一个接一个地串行执行，用户会明显感受到页面加载的迟滞，体验大打折扣。这时候，并发请求就成了提升前端性能的关键技术。

但并发请求的实现方式远不止一种。很多开发者习惯性地使用Promise.all()，也有人记得Axios曾经提供的axios.all()方法。这两种方式在底层机制、错误处理、资源管理上究竟有何差异？在Vue3的Composition API生态下，我们又该如何结合拦截器、响应式系统来构建更健壮、更高效的并发请求方案？这篇文章将带你深入并发请求的每一个细节，从原理到实践，从基础用法到高级优化，为你提供一套完整的解决方案。

1. 并发请求的核心：理解Promise.all的机制与局限

Promise.all()是JavaScript原生提供的并发处理工具，它的设计理念简洁而强大：接收一个Promise数组，当所有Promise都成功解决（fulfilled）时，返回一个包含所有结果的数组；如果其中任何一个Promise被拒绝（rejected），则立即抛出错误，整个Promise.all()调用失败。

1.1 Promise.all的基本使用模式

让我们从一个典型的电商首页数据获取场景开始：

// 模拟电商首页需要并发获取的数据
const fetchHomePageData = async () => {
  const urls = [
    '/api/user/profile',      // 用户信息
    '/api/products/recommended', // 推荐商品
    '/api/promotions/active', // 活动信息
    '/api/cart/summary',      // 购物车摘要
    '/api/notifications/unread' // 未读通知
  ];
  
  try {
    const requests = urls.map(url => axios.get(url));
    const results = await Promise.all(requests);
    
    // 解构结果数组
    const [userData, products, promotions, cart, notifications] = results;
    
    return {
      user: userData.data,
      products: products.data,
      promotions: promotions.data,
      cart: cart.data,
      notifications: notifications.data
    };
  } catch (error) {
    console.error('并发请求失败:', error);
    throw error;
  }
};

这种模式看似完美，但它有一个致命的缺陷：全有或全无的特性。如果五个请求中有一个失败（比如购物车服务暂时不可用），那么整个并发请求就会失败，即使其他四个请求已经成功获取了数据。

注意：在需要确保所有数据都完整才能渲染页面的场景下，这种特性是合理的。但在很多实际应用中，我们可能希望部分失败不影响整体体验。

1.2 Promise.allSettled的替代方案

ES2020引入的Promise.allSettled()提供了更灵活的并发处理方式。它不会因为单个Promise失败而中断，而是等待所有Promise都完成（无论成功还是失败），然后返回一个描述每个Promise状态的结果数组。

const fetchHomePageDataWithGracefulDegradation = async () => {
  const endpoints = [
    { key: 'user', url: '/api/user/profile' },
    { key: 'products', url: '/api/products/recommended' },
    { key: 'promotions', url: '/api/promotions/active' },
    { key: 'cart', url: '/api/cart/summary' },
    { key: 'notifications', url: '/api/notifications/unread' }
  ];
  
  const requests = endpoints.map(({ key, url }) => 
    axios.get(url)
      .then(response => ({ 
        status: 'fulfilled', 
        key, 
        value: response.data 
      }))
      .catch(error => ({ 
        status: 'rejected', 
        key, 
        reason: error.message 
      }))
  );
  
  const results = await Promise.allSettled(requests);
  
  // 处理结果
  const data = {};
  const errors = {};
  
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      const { key, value } = result.value;
      data[key] = value;
    } else {
      const { key, reason } = result.value;
      errors[key] = reason;
    }
  });
  
  return { data, errors };
};

这种模式特别适合数据看板类应用，即使某个数据源暂时不可用，其他数据仍然可以正常展示，并在界面上给出适当的错误提示。

1.3 性能考量：并发数限制与资源竞争

无限制的并发请求可能导致浏览器或服务器的资源竞争。现代浏览器对同一域名的并发连接数有限制（通常是6个），过多的并发请求会导致排队，反而降低性能。

// 实现带并发限制的请求函数
const limitedConcurrentRequests = async (urls, maxConcurrent = 4) => {
  const results = new Array(urls.length);
  let currentIndex = 0;
  
  // 执行一批请求
  const runBatch = async () => {
    const batch = [];
    const batchIndices = [];
    
    // 收集当前批次
    while (batch.length < maxConcurrent && currentIndex < urls.length) {
      const index = currentIndex++;
      batchIndices.push(index);
      batch.push(
        axios.get(urls[index])
          .then(response => ({ index, data: response.data }))
          .catch(error => ({ index, error }))
      );
    }
    
    // 执行当前批次
    const batchResults = await Promise.allSettled(batch);
    
    // 存储结果
    batchResults.forEach((result, i) => {
      const originalIndex = batchIndices[i];
      if (result.status === 'fulfilled') {
        results[originalIndex] = { success: true, data: result.value.data };
      } else {
        results[originalIndex] = { success: false, error: result.value.error };
      }
    });
    
    return batch.length;
  };
  
  // 分批执行所有请求
  while (currentIndex < urls.length) {
    await runBatch();
  }
  
  return results;
};

// 使用示例
const dashboardUrls = [
  '/api/metrics/sales',
  '/api/metrics/users',
  '/api/metrics/conversion',
  '/api/metrics/revenue',
  '/api/metrics/retention',
  '/api/metrics/churn',
  '/api/metrics/engagement',
  '/api/metrics/satisfaction'
];

// 限制最多同时4个请求
const dashboardData = await limitedConcurrentRequests(dashboardUrls, 4);

这种分批并发的方式在大数据看板场景中特别有用，可以平衡请求速度和系统负载。

2. Axios并发生态：从axios.all到现代实践

Axios早期版本提供了axios.all()和axios.spread()这两个辅助方法，但随着JavaScript原生Promise API的完善，这些方法在Axios 0.21.0之后已被标记为废弃。了解它们的历史和替代方案，有助于我们更好地理解并发请求的演进。

2.1 axios.all的历史角色与现状

在ES6 Promise普及之前，Axios通过axios.all()提供了类似Promise.all()的功能，配合axios.spread()可以方便地解构结果：

// 旧版Axios的并发请求方式（已废弃）
axios.all([
  axios.get('/api/user/1'),
  axios.get('/api/user/2'),
  axios.get('/api/user/3')
])
.then(axios.spread((user1, user2, user3) => {
  console.log('用户1:', user1.data);
  console.log('用户2:', user2.data);
  console.log('用户3:', user3.data);
}))
.catch(error => {
  console.error('请求失败:', error);
});

axios.spread()的作用是将结果数组展开为独立的参数，这在当时确实提供了一些便利。但随着JavaScript语言的发展，我们现在有更优雅的方式：

// 现代替代方案
const [user1, user2, user3] = await Promise.all([
  axios.get('/api/user/1'),
  axios.get('/api/user/2'),
  axios.get('/api/user/3')
]);

console.log('用户1:', user1.data);
console.log('用户2:', user2.data);
console.log('用户3:', user3.data);

2.2 结合Axios拦截器的并发请求优化

Axios拦截器为并发请求提供了强大的扩展能力。通过合理配置请求和响应拦截器，我们可以实现统一的错误处理、重试机制、性能监控等功能。

创建增强型Axios实例：

// utils/advancedAxios.js
import axios from 'axios';

// 创建基础实例
const advancedAxios = axios.create({
  baseURL: process.env.VUE_APP_API_BASE,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求计数器，用于并发请求监控
let activeRequests = 0;
const maxConcurrentWarn = 10;

// 请求拦截器
advancedAxios.interceptors.request.us