Vue基础教程（182）axios基本用法之并发请求：当axios遇上“左右互搏术”：并发请求让前端性能起飞！

哎呦喂，各位前端摸鱼大师们，今天咱们来聊个能让你少写一半代码的神奇操作——axios并发请求！别看名字高大上，说白了就是让你同时发送多个请求，等它们全都回来了再统一处理。就像点外卖时同时叫了奶茶和炸鸡，你不用等奶茶小哥到了再去点炸鸡，而是两手一抓同时享用！

还记得刚入行时，我像个憨憨一样写着：

getUserInfo().then(user => {
  getOrderList().then(orders => {
    // 层层嵌套，血压飙升
  })
})

现在回想起来，这代码简直比老太太的裹脚布还臭还长！直到我发现了axios的并发绝技，才明白什么叫“代码优雅，下班提早”。

一、为什么你需要并发请求？外卖小哥给你答案

想象一下中午饿得前胸贴后背，你有两个选择：

方案A（顺序请求）：先点黄焖鸡，等30分钟送到后，再点奶茶，再等20分钟。总计：50分钟，饿到昏厥

方案B（并发请求）：同时下单黄焖鸡和奶茶，最慢的那个30分钟送到。总计：30分钟，美滋滋

并发请求就是方案B！在前端开发中，这种场景比比皆是：

页面初始化需要同时获取用户信息、配置信息、通知列表
表单提交时需要同时上传文件和数据
dashboard需要同时拉取图表数据、统计信息、实时状态

如果不使用并发，你的代码就会变成“回调地狱亲子游”，不仅可读性差，性能也慢得像蜗牛爬。

二、axios并发双雄：all()与spread()

axios提供了两个神器来实现并发请求，它们配合起来就像郭德纲和于谦——单独也能用，但合体才是王炸！

1. axios.all() - 请求界的“集邮大师”

这家伙能把多个请求打包成一个“请求大礼包”，等所有请求都完成了才统一通知你。

import axios from 'axios';

// 假设这是你的三个API接口
const getUser = () => axios.get('/api/user');
const getOrders = () => axios.get('/api/orders'); 
const getNotifications = () => axios.get('/api/notifications');

// 使用axios.all打包发送
axios.all([getUser(), getOrders(), getNotifications()])
  .then(axios.spread((user, orders, notifications) => {
    // 三个请求都完成啦！可以愉快地处理数据了
    console.log('用户数据:', user.data);
    console.log('订单列表:', orders.data);
    console.log('通知信息:', notifications.data);
  }));

看到没有？原本需要层层嵌套的三个请求，现在整齐得像国庆阅兵方阵！

2. axios.spread() - 数据拆包小能手

spread()的作用就像拆快递——把axios.all()返回的数据数组“拆包”成独立的变量。

没有spread时，你得这样写：

axios.all([getUser(), getOrders()])
  .then(responseArray => {
    const user = responseArray[0];  // 手动取第一个
    const orders = responseArray[1]; // 手动取第二个
    // 万一顺序搞错了...芭比Q了
  });

有了spread后，代码清爽多了：