如何在 axios 中返回多个 Promise

在开发过程中，我们有时需要在 axios 中同时请求多个接口，每个接口都返回一个 Promise。而此时，我们又希望将多个Promise的结果合并在一起并进行统一处理。在这篇文章中，将介绍如何在axios中返回多个Promise。

解决方案

1. 使用Promise.all()

Promise.all() 是 ES2015 (ES6) 中的 Promise 异步处理方法之一。它接收一个包含多个 Promise 的数组作为参数，并且只有在数组中的所有Promise都成功执行后才会返回一个成功状态。

代码演示：

const axios = require('axios');

const getUsers = axios.get('/users');
const getPosts = axios.get('/posts');
const getComments = axios.get('/comments');

Promise.all([getUsers, getPosts, getComments]).then((results) => {
  const [users, posts, comments] = results;
  console.log(users.data);
  console.log(posts.data);
  console.log(comments.data);
}).catch((error) => {
  console.log(error);
})

2. 使用async/await语法

async/await 是 ES2017 中的异步方案，它可以让异步处理更简单。我们可以使用 async/await 语法来获取 axios 返回的 Promise。

代码演示：

const axios = require('axios');

async function fetchData() {
  try {
    const users = await axios.get('/users');
    const posts = await axios.get('/posts');
    const comments = await axios.get('/comments');
    console.log(users.data);
    console.log(posts.data);
    console.log(comments.data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

3. 使用Promise.race()

Promise.race() 是 ES2015 (ES6) 中的 Promise 异步处理方法之一。它接收一个包含多个 Promise 的数组作为参数，并且只要有一个 Promise 成功执行就会返回一个成功状态。 Promise.race() 方法使用场景较少，一般用于竞争异步任务。

代码演示：

const axios = require('axios');

const getUsers = axios.get('/users');
const getPosts = axios.get('/posts');
const getComments = axios.get('/comments');

Promise.race([getUsers, getPosts, getComments]).then((result) => {
  console.log(result.data);
}).catch((error) => {
  console.log(error);
})

结论

以上是在 axios 中返回多个 Promise 的方法。使用 Promise.all() 可以等待所有的Promise结束，使用 async/await 可以让异步处理更简单，使用Promise.race() 可以等待其中一个 Promise结束。结合实际应用场景选择使用。