在 JavaScript 中实现并发请求

简介

在现代 Web 开发中，高效处理多个异步请求是一个常见需求。并发请求允许同时处理多个请求，可以显著提高 Web 应用程序的性能。在本博客中，我们将探讨如何使用一个名为 ConcurrencyRequest 的自定义类，在 JavaScript 中执行并发请求，并优雅地处理响应。

前提条件

在深入代码之前，请确保满足以下要求：

在系统上安装了 Node.js 和 npm。
有一个简单的 Express 服务器正在 http://localhost:8000 运行。

创建并发请求类

我们首先要创建一个能够处理并发请求的类 ConcurrencyRequest。这个类的主要功能是将多个请求按照最大并发数量同时发送，以提高请求的执行效率。

// ConcurrencyRequest.js

export default class ConcurrencyRequest {
  constructor({ maxConcurrencyCount }) {
    this.maxConcurrencyCount = maxConcurrencyCount; // 最大并发数量
    this.taskQueue = [];
    this.responses = {};
    setTimeout(() => {
      this._doRequest();
    });
  }

  push(task) {
    this.taskQueue.push(task);
  }

  _doRequest() {
    if (!this.taskQueue.length) return;

    const minConcurrencyCount = this._getMinCount(
      this.maxConcurrencyCount,
      this.taskQueue.length
    );

    for (let i = 0; i < minConcurrencyCount; i++) {
      const task = this.taskQueue.shift();
      this.maxConcurrencyCount--;
      this._runTask(task);
    }
  }

  _runTask(task) {
    task()
      .then((res) => {
        this.responses[task.name] = {
          result: res,
          error: null,
        };
      })
      .catch((err) => {
        this.responses[task.name] = {
          result: null,
          error: err,
        };
      })
      .finally(() => {
        this.maxConcurrencyCount++;
        this._doRequest();
      });
  }

  _getMinCount(count1, count2) {
    return Math.min(count1, count2);
  }
}

构造函数：在构造函数中，我们传入 maxConcurrencyCount 参数，该参数表示最大并发请求数量。我们还初始化一个任务队列 taskQueue 和一个空对象 responses 来存储请求的结果。
push 方法：我们通过 push 方法将要执行的任务添加到任务队列中。
_doRequest 方法：这个方法是并发请求的核心逻辑。它负责执行并发请求并管理任务队列。首先，它检查任务队列是否为空，如果为空则直接返回。然后，它计算可以同时发送的最小请求数量 minConcurrencyCount，这个数量是最大并发数量和任务队列长度之间的较小值。
_runTask 方法：在 _doRequest 方法中，我们通过 _runTask 方法执行实际的请求任务。该方法从任务队列中获取任务，并通过传入的 Promise 对象执行请求。请求结果成功时，将结果保存在 responses 对象中，并标记 error 为 null。如果请求发生错误，则将错误信息保存在 responses 对象中，并标记 result 为 null。最后，无论请求成功还是失败，我们都会调整 maxConcurrencyCount 的值，并递归调用 _doRequest 方法以继续处理队列中的下一个任务。

_getMinCount 方法：该方法用于计算两个数值中较小的值，以便确定实际可以并发执行的请求数量。

处理并发请求

现在我们已经创建了 ConcurrencyRequest 类，我们可以使用它来处理多个并发请求。下面是我们的主要脚本代码：

// index.js

import ConcurrencyRequest from "./ConcurrencyRequest";

const BASE_URL = 'http://localhost:8000/';

// 假设有九个请求函数
// ...

const taskQueue = [
  getTest1,
  getTest2,
  getTest3,
  getTest4,
  getTest5,
  getTest6,
  getTest7,
  getTest8,
  getTest9
];

const concurrencyRequest = new ConcurrencyRequest({
  maxConcurrencyCount: 2, // 设置最大并发数量
});

for (let task of taskQueue) {
  concurrencyRequest.push(task);
}

console.log(concurrencyRequest.responses);

// 输出结果：
// {
//   test1: { result: ..., error: ... },
//   test2: { result: ..., error: ... },
//   test3: { result: ..., error: ... },
//   ...
// }

配置 Express 服务器

为了使并发请求能够真正发挥作用，我们需要在服务器端配置相应的路由来处理这些请求。这里我们使用 Express 框架来创建简单的服务器。

// server.js

const express = require('express');
const app = express();

app.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET');
  next();
});

// 假设有九个路由处理对应的请求
// ...

app.listen(8000, () => console.log('服务器已启动！'));

总结

在本博客中，我们介绍了如何在 JavaScript 中实现并发请求。通过使用自定义的 ConcurrencyRequest 类，我们可以轻松地管理多个异步请求，并以最大并发数量同时发送这些请求，从而提高应用程序的性能。同时，我们还创建了一个简单的 Express 服务器来处理这些并发请求。

希望这篇博客能够帮助您理解并发请求的概念，并在实际项目中应用这些技术。祝您编程愉快！