菜鸟教程
教程 axios tutorial

同时发送多个请求（axios.all / axios.spread）

在实际开发中，常常需要同时请求多个接口，例如同时获取用户信息和订单列表。Axios 提供了 axios.all 和 axios.spread 方法，方便并发请求。

1. 使用 axios.all 并发请求

javascript 
import axios from "axios";

const requestUser = axios.get("/user/123");
const requestOrders = axios.get("/orders?userId=123");

axios
  .all([requestUser, requestOrders])
  .then((responses) => {
    const user = responses[0].data;
    const orders = responses[1].data;
    console.log("用户信息：", user);
    console.log("订单列表：", orders);
  })
  .catch((error) => console.error("请求失败：", error));

2. 使用 axios.spread 展开参数

javascript 
axios
  .all([requestUser, requestOrders])
  .then(
    axios.spread((userRes, ordersRes) => {
      console.log("用户信息：", userRes.data);
      console.log("订单列表：", ordersRes.data);
    })
  )
  .catch((error) => console.error("请求失败：", error));

3. 优势

  • 提高效率：并发请求可以同时获取多个接口数据，减少等待时间；
  • 代码简洁：使用 axios.spread 可以直接解构结果，避免手动索引数组；
  • 统一错误处理：所有请求在 catch 中统一处理异常。

💡 小提示：在多个接口数据相互独立且无需顺序依赖时，使用 axios.all 并发请求可以大幅提升前端性能。

相关内容