Promise 并发请求的优化和限流方案-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要发起多个网络请求，但是由于网络请求本身的不确定性，有时候会导致请求的响应时间过长，甚至出现请求失败的情况。为了解决这些问题，我们可以通过 Promise 并发请求的优化和限流方案来提高请求的效率和稳定性。

Promise 并发请求的优化

在前端开发中，我们通常会使用 Promise 来进行异步操作。在进行多个网络请求时，可以使用 Promise.all() 来并发发送请求，等待所有请求都完成后再进行后续的操作。

// www.javascriptcn.com code example
const promises = [fetch('/api/user'), fetch('/api/role'), fetch('/api/permission')];

Promise.all(promises)
  .then(([user, role, permission]) => {
    // 所有请求都已完成
  })
  .catch(error => {
    // 请求失败
  });

上面的代码中，我们通过 Promise.all() 来并发发送三个网络请求，并等待所有请求都完成后再进行后续的操作。

Promise 限流方案

在实际开发中，我们往往需要限制并发请求数量，以避免服务器过载或者请求失败的情况。下面是一些常用的 Promise 限流方案。

1. 队列

通过队列的方式来限制并发请求数量，可以保证每次只有一定数量的请求被发送，等待请求完成后再发送下一个请求。

// www.javascriptcn.com code example
class Queue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.tasks = [];
    this.running = 0;
  }

  push(task) {
    this.tasks.push(task);
    this.next();
  }

  next() {
    while (this.running < this.concurrency && this.tasks.length) {
      const task = this.tasks.shift();
      task(() => {
        this.running--;
        this.next();
      });
      this.running++;
    }
  }
}

const queue = new Queue(2);

const urls = ['/api/user', '/api/role', '/api/permission'];

urls.forEach(url => {
  queue.push(callback => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        // 请求成功
        callback();
      })
      .catch(error => {
        // 请求失败
        callback();
      });
  });
});

上面的代码中，我们使用一个队列来限制并发请求数量，当队列中的任务数量小于并发数时，就会执行下一个任务。

2. Promise 链式调用

通过 Promise 链式调用的方式来限制并发请求数量，可以保证每次只有一定数量的请求被发送，等待请求完成后再发送下一个请求。

// www.javascriptcn.com code example
const urls = ['/api/user', '/api/role', '/api/permission'];

const limit = (urls, limit) => {
  const results = [];
  const executing = [];

  const execute = url => {
    const promise = fetch(url)
      .then(response => response.json())
      .then(data => {
        // 请求成功
        results.push(data);
      })
      .catch(error => {
        // 请求失败
      })
      .finally(() => {
        executing.splice(executing.indexOf(promise), 1);
      });

    executing.push(promise);

    const combined = Promise.all(executing);

    return combined;
  };

  const promises = urls.map(url => {
    return () => execute(url);
  });

  return promises.reduce((promiseChain, currentTask) => {
    return promiseChain.then(() => currentTask());
  }, Promise.resolve());
};

limit(urls, 2)
  .then(() => {
    // 所有请求都已完成
  })
  .catch(error => {
    // 请求失败
  });

上面的代码中，我们使用 Promise 链式调用的方式来限制并发请求数量，当正在执行的任务数量小于并发数时，就会执行下一个任务。

结语

通过以上的介绍，我们可以看到 Promise 并发请求的优化和限流方案对于提高请求的效率和稳定性非常重要。在实际开发中，我们应该根据具体的情况选择合适的方案来进行并发请求的优化和限流。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d44711a941bf713480fbec

Promise 并发请求的优化和限流方案