如何同时发起多个 Axios 请求？

当您需要同时发起多个 Axios 请求时，可以使用 axios.all() 方法结合 axios.spread()。axios.all() 允许您并行执行多个请求，而 axios.spread() 可以让您处理这些请求的响应。

以下是一个例子，展示了如何同时发起两个请求：

javascript
import axios from 'axios';

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

// 使用axios.all并行地发出两个请求
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 当两个请求都完成时，这个回调函数会被执行
    // acct 和 perms 分别是两个请求的响应
    console.log('User Account', acct.data);
    console.log('User Permissions', perms.data);
  }))
  .catch(error => {
    console.error('An error occurred:', error);
  });

在上面的代码中，getUserAccount 和 getUserPermissions 函数分别发出了两个 HTTP GET 请求。使用 axios.all() 将这两个请求组合在一起，它们会并行执行。当所有请求都完成时，axios.spread() 回调函数被调用，并接收每一个响应作为参数。

自从 ES6 引入了 Promise，我们也可以使用 Promise.all 来实现类似的功能，示例代码如下：

javascript
Promise.all([getUserAccount(), getUserPermissions()])
  .then(([acct, perms]) => {
    // 当两个请求都成功完成时，这个回调函数会被执行
    console.log('User Account', acct.data);
    console.log('User Permissions', perms.data);
  })
  .catch(error => {
    // 如果任何请求失败，这个回调函数会被执行
    console.error('An error occurred:', error);
  });

这里使用了 Promise.all() 来等待所有给定的 Promise 对象都成功完成。如果所有请求都成功，它们的响应会作为一个数组传递给 .then() 方法的回调函数；否则，如果任何一个请求失败，.catch() 方法会捕获到失败的原因。这种方式具有更好的兼容性，并且在现代 JavaScript 开发中更加常见。