实现一个实用的 Promise 队列小工具

2023-11-22 05:47:08

前言

在前端开发中，我们经常会遇到需要发起多个异步请求的情况。这些请求可能是来自不同的 API 接口，也可能是来自不同的组件或兄弟功能。如果这些请求同时发起，可能会导致浏览器卡顿，甚至崩溃。因此，我们需要对这些并发请求进行控制，以保证应用的性能和稳定性。

Promise 队列小工具

Promise 队列小工具是一个可以帮助我们控制异步请求并发数量的工具。它可以将多个异步请求排队，并按照一定的顺序执行。这样，就可以防止浏览器一次性发起过多的请求，从而导致卡顿或崩溃。

实现一个 Promise 队列小工具并不难。我们可以使用 JavaScript 的 Promise 对象来实现。Promise 对象是一个表示异步操作的占位符，它可以被用来等待异步操作的完成。

class PromiseQueue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.queue = [];
    this.running = 0;
  }

  add(promise) {
    this.queue.push(promise);
    this.run();
  }

  run() {
    while (this.running < this.concurrency && this.queue.length > 0) {
      const promise = this.queue.shift();
      this.running++;
      promise.then(() => {
        this.running--;
        this.run();
      });
    }
  }
}

这是一个简单的 Promise 队列小工具的实现。它可以控制并发请求的数量，并按照一定的顺序执行这些请求。

使用 Promise 队列小工具

Promise 队列小工具可以用来实现一些常见的场景，如节流和控制并发。

节流

节流是指限制函数在一定时间内只能执行一次。我们可以使用 Promise 队列小工具来实现节流。

const throttle = (func, wait) => {
  let queue = new PromiseQueue(1);
  return (...args) => {
    queue.add(func(...args));
  };
};

这是一个节流函数的实现。它使用 Promise 队列小工具来控制函数的执行频率。

控制并发

控制并发是指限制同时执行的异步任务的数量。我们可以使用 Promise 队列小工具来控制并发。

const limitConcurrency = (tasks, concurrency) => {
  const queue = new PromiseQueue(concurrency);
  return Promise.all(tasks.map(task => queue.add(task)));
};

这是一个控制并发函数的实现。它使用 Promise 队列小工具来控制同时执行的任务数量。