控制并发请求：使用 Promise.all 的实现方案

在前端开发中，我们经常需要同时发送多个异步请求。但是过多的并发请求可能会导致性能问题，因此需要控制并发请求。本文将介绍使用 Promise.all 来控制并发请求的实现方案。

Promise.all

Promise.all 是 Promise 的一个静态方法，用于处理多个 Promise 对象。它接收一个数组作为参数，数组中的每个元素都是 Promise 对象。Promise.all 返回一个 Promise 对象，当数组中所有 Promise 对象都成功时，该 Promise 对象才会成功。

Promise.all 的语法如下：

Promise.all(iterable);

其中 iterable 是一个可迭代对象，如数组或类数组对象。

实现方案

我们可以将多个异步请求封装成 Promise 对象，并将这些 Promise 对象存入数组中。然后使用 Promise.all 来处理这些 Promise 对象。

以下是使用 Promise.all 的实现方案：

// javascriptcn.com 代码示例
function request(urls, max) {
  return new Promise((resolve, reject) => {
    const urlsLength = urls.length;
    let counter = 0;
    let errors = [];

    function requestUrl(url) {
      return new Promise((resolve, reject) => {
        fetch(url)
          .then(response => resolve(response.json()))
          .catch(error => reject(error));
      });
    }

    function requestNextUrl() {
      if (counter === urlsLength) {
        resolve();
        return;
      }

      const index = counter++;
      const url = urls[index];

      requestUrl(url)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
          errors.push(error);
        })
        .finally(requestNextUrl);
    }

    for (let i = 0; i < max; i++) {
      requestNextUrl();
    }
  });
}

const urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3',
  'https://jsonplaceholder.typicode.com/posts/4',
  'https://jsonplaceholder.typicode.com/posts/5',
  'https://jsonplaceholder.typicode.com/posts/6',
  'https://jsonplaceholder.typicode.com/posts/7',
  'https://jsonplaceholder.typicode.com/posts/8',
  'https://jsonplaceholder.typicode.com/posts/9',
  'https://jsonplaceholder.typicode.com/posts/10'
];

request(urls, 3)
  .then(() => {
    console.log('All requests completed successfully');
  })
  .catch(errors => {
    console.error(`Failed to complete ${errors.length} requests`);
  });

在上面的代码中，我们定义了一个 request 函数，它输入一个 URLs 数组和一个最大请求并发数，返回一个 Promise 对象。在函数中，我们定义了两个内部函数，requestUrl 和 requestNextUrl，分别用于发送单个请求和处理下一个请求。

在 requestNextUrl 函数中，我们使用了一个计数器，将其递增并使用其来选择下一个要请求的 URL。我们还定义了一个 errors 数组，用于存储所有失败的请求。

我们使用了一个 for 循环来启动并发请求，每次最多启动 max 个请求，并且在请求完成后会自动处理下一个请求。在每个请求完成后，我们使用了 Promise.all 来处理所有成功或失败的请求。

总结

使用 Promise.all 可以方便地控制并发请求，并且可以轻松地处理所有请求成功或失败的情况。在实现时，我们需要定义一个计数器和一个 errors 数组，用于处理所有请求的状态。

以上就是使用 Promise.all 来控制并发请求的实现方案。希望能对您在前端开发中的工作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f6f147d4982a6eb0900ba