要控制前端Promise的并发请求数，可以使用一种叫做“限流”的技术。具体来说，可以创建一个计数器，每次发送请求时将其增加1，收到响应后将其减少1。这样就可以控制同时进行的请求数量。

以下是一个示例代码片段，展示如何使用计数器来控制前端Promise的并发请求数：

class RequestLimit {
  constructor(limit) {
    this.limit = limit;
    this.count = 0;
    this.queue = [];
  }
  
  async add(fn) {
    if (this.count < this.limit) {
      this.count++;
      return fn().finally(() => {
        this.count--;
        this.next();
      });
    } else {
      return new Promise(resolve => {
        this.queue.push(() => {
          this.count++;
          resolve(fn().finally(() => {
            this.count--;
            this.next();
          }));
        });
      });
    }
  }
  
  next() {
    if (this.count < this.limit && this.queue.length > 0) {
      const fn = this.queue.shift();
      fn();
    }
  }
}

const limit = new RequestLimit(5);

for (let i = 0; i < 20; i++) {
  limit.add(() => fetch(`https://jsonplaceholder.typicode.com/todos/${i}`).then(res => res.json())).then(console.log);
}

在上面的代码中，我们首先定义了一个名为RequestLimit的类，它接受一个参数limit，表示最大的并发请求数量。该类包含了三个属性：

• limit：最大并发请求数量
• count：当前正在进行的请求数量
• queue：等待执行的请求队列

该类还定义了两个方法：

• add()：接受一个参数fn，表示发送请求的函数。如果当前正在进行的请求数量小于最大并发请求数量，则直接执行fn()并返回Promise结果。否则将fn()包装成一个Promise，并将其添加到队列中，返回一个新的Promise，用于在之后获取结果。
• next()：从队列中取出下一个请求并执行。

使用时，我们可以先创建一个RequestLimit实例，然后通过调用add()方法来发送请求。在本例子中，我们使用了fetch()方法来发送请求，但实际上可以替换成其他的异步请求。

接下来我们解释一下上面代码的具体实现和使用。

首先，创建一个RequestLimit类，该类包含了三个属性：

• limit：最大并发请求数量
• count：当前正在进行的请求数量
• queue：等待执行的请求队列

class RequestLimit {
  constructor(limit) {
    this.limit = limit;
    this.count = 0;
    this.queue = [];
  }
}

在该类中，我们定义了两个方法：add()和next()。其中，add()用于添加新的请求，并返回Promise对象；next()则用于执行等待队列中的下一个请求。

class RequestLimit {
  // ...
  
  async add(fn) {
    if (this.count < this.limit) {
      // 如果当前正在进行的请求数量小于最大并发请求数量，则直接执行fn()并返回结果。
      this.count++;
      return fn().finally(() => {
        this.count--;
        this.next();
      });
    } else {
      // 否则将fn()包装成一个新的Promise，并将其添加到等待队列中。
      return new Promise(resolve => {
        this.queue.push(() => {
          this.count++;
          resolve(fn().finally(() => {
            this.count--;
            this.next();
          }));
        });
      });
    }
  }
  
  next() {
    // 当前正在进行的请求数量小于最大并发请求数量，并且等待队列中有请求，则取出第一个请求并执行。
    if (this.count < this.limit && this.queue.length > 0) {
      const fn = this.queue.shift();
      fn();
    }
  }
}

在add()方法中，我们首先检查当前正在进行的请求数量是否小于最大并发请求数量。如果是，则直接执行fn()函数，并返回Promise结果。否则，我们将fn()包装成一个新的Promise对象，并将其添加到等待队列中。

在next()方法中，我们检查当前正在进行的请求数量是否小于最大并发请求数量，并且等待队列中是否有请求。如果都满足，则取出等待队列中的第一个请求并执行。

下面我们使用上面实现的限流类来控制前端Promise的并发请求数：

const limit = new RequestLimit(5);

for (let i = 0; i < 20; i++) {
  limit.add(() => fetch(`https://jsonplaceholder.typicode.com/todos/${i}`).then(res => res.json())).then(console.log);
}

在上面的代码中，我们首先创建了一个名为limit的RequestLimit实例，最大并发请求数量为5。然后我们使用for循环发送20个请求，通过调用limit.add()方法来控制并发请求数量。这样，就可以限制前端Promise的并发请求数量，避免请求过多导致性能问题。

上面的代码中的关键是使用计数器来控制请求的并发数。当需要新请求时，我们首先检查当前正在进行的请求数量是否小于最大并发请求数量。如果是，我们就直接执行该请求，并将正在进行的请求数量加1；否则，我们将该请求添加到等待队列中，返回一个Promise对象，并在队列中等待被执行。

当有请求完成后，我们将正在进行的请求数量减1，并调用next()方法来尝试执行下一个等待队列中的请求。

这里需要注意的是，在使用限流技术时，如果请求处理时间过长，可能会导致等待队列中的请求数量不断增加，从而占用过多的内存资源。因此，在实际应用中需要根据具体情况设置合适的最大并发请求数量，避免过度消耗系统资源。

另外需要注意的是，虽然限流可以有效地控制请求的并发数，但它并不能完全保证请求的顺序。如果需要保证请求的顺序，可以使用其他的技术，比如串行执行Promise或使用同步的Ajax请求。

除了上述提到的“限流”技术，还有其他可以控制前端Promise并发请求数的方法，比如使用第三方库或者自己手动实现。

1. 使用第三方库

很多第三方库都提供了控制并发请求数量的功能。其中一些库包括axios、superagent、qwest等。这些库通常会提供一个配置项，用于设置最大并发请求数，从而避免请求过多导致性能问题。

以axios为例，它提供了一个名为maxContentLength的配置项，用于设置响应内容的最大长度。当并发请求过多时，设置该值可以避免响应内容过大导致内存占用过高。此外，对于axios，可以使用axios.all()来发送多个并发请求，并在所有请求完成后获取结果。

2. 手动实现

如果不想依赖第三方库，我们也可以手动实现一个控制并发请求数量的工具。通常情况下，我们可以通过创建一个计数器和一个等待队列来实现：

class RequestLimit {
  constructor(limit) {
    this.limit = limit;
    this.count = 0;
    this.queue = [];
  }

  async add(fn) {
    if (this.count >= this.limit) {
      await new Promise(resolve => this.queue.push(resolve));
    }
    this.count++;
    try {
      return await fn();
    } finally {
      this.count--;
      if (this.queue.length > 0) {
        this.queue.shift()();
      }
    }
  }
}

在上面的代码中，我们创建了一个名为RequestLimit的类。该类包含了三个属性：

• limit：最大并发请求数量
• count：当前正在进行的请求数量
• queue：等待执行的请求队列

该类还定义了一个方法add()，用于添加新的请求。在该方法中，我们首先检查当前正在进行的请求数量是否小于最大并发请求数量。如果是，则直接执行fn()函数，并返回Promise结果；否则，我们将该请求添加到等待队列中，并返回一个Promise对象，等待被执行。

当有请求完成后，我们将正在进行的请求数量减1，并检查等待队列中是否有请求。如果有，则取出队列中的第一个请求并执行。

使用时，我们可以先创建一个RequestLimit实例，然后通过调用add()方法来发送请求。以下是一个示例代码片段：

const limit = new RequestLimit(5);

for (let i = 0; i < 20; i++) {
  limit.add(() => fetch(`https://jsonplaceholder.typicode.com/todos/${i}`).then(res => res.json())).then(console.log);
}

在本例子中，我们创建了一个名为limit的RequestLimit实例，设置最大并发请求数量为5。然后我们使用for循环发送20个请求，通过调用limit.add()方法来控制并发请求数量。这样，就可以限制前端Promise的并发请求数量，避免请求过多导致性能问题。

需要注意的是，手动实现可能需要更多的代码和维护成本，但它也可以提供更多的灵活性和自定义功能。

最后

给“前端面试题宝典”的辅导服务打下广告，目前有面试全流程辅导、简历指导、模拟面试、零基础辅导和付费咨询等增值服务，感兴趣的伙伴可以联系小助手（微信号：interview-fe）了解详情哦~