当前位置：首页 > article >正文

Axios 如何处理并发请求

article 2025/2/20 17:35:50

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

Axios 是一个基于 Promise 的 HTTP 客户端，它提供了一种简单而强大的方式来发送 HTTP 请求。在实际开发中，我们经常需要同时发送多个请求，并等待所有请求完成后再进行下一步操作。Axios 提供了一些方法来处理并发请求，使得代码更加简洁和高效。

1. 使用 Promise.all

Promise.all 是 JavaScript 中的一个方法，它接收一个 Promise 数组，并返回一个新的 Promise。当所有传入的 Promise 都成功解析时，新的 Promise 会被解析，并接收一个包含所有解析值的数组。当任何一个 Promise 被拒绝时，新的 Promise 会被拒绝，并接收第一个被拒绝的 Promise 的拒绝原因。

在 Axios 中，我们可以使用 Promise.all 来处理并发请求。以下是一个示例：

import axios from 'axios';

axios.all([
  axios.get('/user?ID=12345'),
  axios.get('/user?ID=67890')
])
.then(axios.spread((user1, user2) => {
  console.log(user1.data);
  console.log(user2.data);
}))
.catch(error => {
  console.log(error);
});

在这个示例中，我们使用 axios.all 来发送两个并发请求，并使用 axios.spread 来处理请求的结果。

2. 使用 async/await

在 ES2017 中，JavaScript 引入了 async/await 语法，使得异步代码的编写更加简洁和易读。在 Axios 中，我们可以使用 async/await 来处理并发请求。以下是一个示例：

import axios from 'axios';

async function getUserData() {
  try {
    const [user1, user2] = await Promise.all([
      axios.get('/user?ID=12345'),
      axios.get('/user?ID=67890')
    ]);

    console.log(user1.data);
    console.log(user2.data);
  } catch (error) {
    console.log(error);
  }
}

getUserData();

在这个示例中，我们使用 Promise.all 来发送两个并发请求，并使用 async/await 来等待请求的结果。

3. 使用 axios.spread

axios.spread 是 Axios 提供的一个方法，它接收一个函数和一个数组，并将数组的元素作为参数传递给函数。在处理并发请求时，我们可以使用 axios.spread 来简化代码。

import axios from 'axios';

axios.all([
  axios.get('/user?ID=12345'),
  axios.get('/user?ID=67890')
])
.then(axios.spread((user1, user2) => {
  console.log(user1.data);
  console.log(user2.data);
}))
.catch(error => {
  console.log(error);
});