axios 多个请求 - TypeScript

在 TypeScript 中使用 axios 库发送多个请求是一种常见的场景。通过使用 axios 库的并发功能，我们可以轻松地发送多个请求并等待它们全部完成。

安装 axios

在使用 axios 之前，我们需要先安装它。可以通过 npm 或者 yarn 来进行安装：

npm install axios
# 或
yarn add axios

导入 axios

在 TypeScript 代码中，我们需要导入 axios 库来使用它的功能。可以使用以下语句导入 axios：

import axios from 'axios';

发送多个请求

使用 axios 发送多个请求可以使用其 all 方法，这个方法接受一个包含多个请求的数组，并返回一个新的 Promise 对象。

以下是一个发送多个请求的示例：

const request1 = axios.get('https://api.example.com/endpoint1'); // 第一个请求
const request2 = axios.get('https://api.example.com/endpoint2'); // 第二个请求
const request3 = axios.get('https://api.example.com/endpoint3'); // 第三个请求

axios.all([request1, request2, request3])
  .then(axios.spread((response1, response2, response3) => {
    // 所有请求都完成后会进入这里
    console.log(response1.data);
    console.log(response2.data);
    console.log(response3.data);
  }))
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的示例中，我们首先创建了三个请求对象，然后使用 axios.all 方法来发送这些请求。在 then 方法中，我们使用 axios.spread 方法来把返回的结果解构到不同的变量中，以方便处理每个请求的返回数据。

并发请求限制

如果我们希望限制同时发送的请求数量，axios 也提供了相关的配置选项。可以使用 axios.defaults.maxConcurrentRequests 来设置同时发送的最大请求数量。

以下是一个设置最大并发请求数量为 2 的示例：

axios.defaults.maxConcurrentRequests = 2;

const request1 = axios.get('https://api.example.com/endpoint1'); // 第一个请求
const request2 = axios.get('https://api.example.com/endpoint2'); // 第二个请求
const request3 = axios.get('https://api.example.com/endpoint3'); // 第三个请求

axios.all([request1, request2, request3], { maxContentLength: 2 })
  .then(axios.spread((response1, response2, response3) => {
    // 所有请求都完成后会进入这里
    console.log(response1.data);
    console.log(response2.data);
    console.log(response3.data);
  }))
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的示例中，我们设置最大并发请求数量为 2，并将这个选项作为第二个参数传递给 axios.all 方法。

总结

通过使用 axios 的并发功能，我们可以方便地发送多个请求并等待它们全部完成。在 TypeScript 中使用 axios 的多个请求也非常简单，只需导入 axios 并使用 axios.all 方法即可。并且我们还可以通过设置最大并发请求数量来控制请求的并发度。