主题
同时发送多个请求(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 并发请求可以大幅提升前端性能。