Implementando solicitações simultâneas em JavaScript

Introdução

O tratamento eficiente de várias solicitações assíncronas é um requisito comum no desenvolvimento web moderno. As solicitações simultâneas permitem que várias solicitações sejam processadas ao mesmo tempo, o que pode melhorar significativamente o desempenho das aplicações web. Neste blog, exploraremos como ConcurrencyRequestrealizar solicitações simultâneas em JavaScript e lidar com respostas normalmente usando uma classe personalizada chamada .

pré-requisito

Antes de mergulhar no código, certifique-se de que os seguintes requisitos sejam atendidos:

Node.js e npm instalados no sistema.
Existe um servidor Express simples em execução http://localhost:8000.

Criar classe de solicitação simultânea

Primeiro precisamos criar uma classe capaz de lidar com solicitações simultâneas ConcurrencyRequest. A principal função desta classe é enviar múltiplas solicitações ao mesmo tempo de acordo com o número máximo de simultaneidade, de forma a melhorar a eficiência de execução das solicitações.

// 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);
  }
}

Construtor : No construtor passamos maxConcurrencyCounto parâmetro, que representa o número máximo de solicitações simultâneas. Também inicializamos uma fila de tarefas taskQueuee um objeto vazio responsespara armazenar o resultado da solicitação.
Método push : pushadicionamos a tarefa a ser executada à fila de tarefas por meio do método.
Método _doRequest : Este método é a lógica central das solicitações simultâneas. É responsável por executar solicitações simultâneas e gerenciar a fila de tarefas. Primeiro, ele verifica se a fila de tarefas está vazia e retorna diretamente se estiver vazia. Em seguida, calcula o número mínimo de solicitações que podem ser enviadas ao mesmo tempo minConcurrencyCount, que é o menor valor entre o número máximo de simultaneidade e o comprimento da fila de tarefas.
Método _runTask : No _doRequestmétodo, _runTaskexecutamos a tarefa de solicitação real por meio do método. Este método obtém uma tarefa da fila de tarefas e executa a solicitação por meio do objeto Promise passado. Quando o resultado da solicitação for bem-sucedido, salve o resultado no responsesobjeto e marque errorcomo nulo. Caso ocorra um erro na solicitação, salve as informações do erro no responsesobjeto e marque resultcomo nulo. Finalmente, independentemente de a solicitação ter sido bem-sucedida ou falhar, ajustamos maxConcurrencyCounto valor e chamamos recursivamente _doRequesto método para continuar processando a próxima tarefa na fila.
Método _getMinCount : Este método é usado para calcular o menor valor dos dois valores para determinar o número real de solicitações que podem ser executadas simultaneamente.

Lidar com solicitações simultâneas

Agora que criamos ConcurrencyRequesta classe, podemos usá-la para lidar com múltiplas solicitações simultâneas. Aqui está nosso código de script principal:
```
// 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: ... },
//   ...
// }
```
Configurar o servidor Expresso

Para que as solicitações simultâneas realmente funcionem, precisamos configurar rotas correspondentes no lado do servidor para lidar com essas solicitações. Aqui usamos a estrutura Express para criar um servidor simples.
```
// 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('服务器已启动！'));
```
Resumir

Neste blog, abordamos como implementar solicitações simultâneas em JavaScript. Ao usar uma ConcurrencyRequestclasse customizada, podemos gerenciar facilmente várias solicitações assíncronas e enviá-las ao mesmo tempo com o número máximo de simultaneidade, melhorando assim o desempenho da aplicação. Ao mesmo tempo, também criamos um servidor Express simples para lidar com essas solicitações simultâneas.

Espero que este blog possa ajudá-lo a entender o conceito de solicitações simultâneas e a aplicar essas técnicas em projetos reais. Boa programação!