在前端开发中，我们经常需要处理异步任务。异步任务需要在后台执行，但这种执行方式可能会受到其他任务的影响，因此任务的优先级就显得非常重要了。在这种情况下，npm 包 @wordpress/priority-queue 就派上了用场。
概述
@wordpress/priority-queue 是一个能够管理和执行优先级的异步任务队列，基于 Promise 的实现方式。它能够让你非常方便地设置和处理任务的优先级，从而获得更好的执行效果。
使用方法
1. 安装
@wordpress/priority-queue 第一步要先安装它，通过以下的命令就能立即安装：
npm install @wordpress/priority-queue --save
2. 引用
安装完毕之后，在需要使用的 JavaScript 文件里引入：
import PriorityQueue from '@wordpress/priority-queue';
3. 创建实例
接下来，你可以创建一个队列实例：
const queue = new PriorityQueue();
4. 添加任务
你可以使用 enqueue 方法添加异步任务。这个方法会返回一个 Promise 对象，用于异步任务的执行状态判断。
例如，我们可以添加两个异步任务：
queue.enqueue(() => new Promise(resolve => setTimeout(() => resolve('Task 1'), 1000)));
queue.enqueue(() => new Promise(resolve => setTimeout(() => resolve('Task 2'), 500)));在这个例子中，我们添加了两个异步任务，它们分别执行 1 和 0.5 秒后返回结果。
5. 任务的优先级
添加任务时，@wordpress/priority-queue 提供了一个可选的参数 priority，用于设置任务的优先级。优先级为数字，数字越小表示优先级越高。
例如，如果我们要将上面的两个任务之间的优先级区别设置得更明显一些，我们可以如下设置：
-- -------------------- ---- -------
--------------
-- -- --- --------------- -- ------------- -- ------------- -- -------- ---- -------
- --------- - -
--
--------------
-- -- --- --------------- -- ------------- -- ------------- -- -------- ---- ------
- --------- - -
--这样，第一个任务的优先级为 1，第二个任务的优先级为 3。这说明任务 1 会在任务 2 之前执行。
6. 设置并发限制
默认情况下，我们添加了多个异步任务，它们会并发执行。但是，这种方式可能会降低整个网站的性能。为了避免这种情况的发生，我们可以设置这种限制。
可以使用 setConcurrency 方法来设置这种限制。例如，你要限制一次只能执行 2 个任务，你可以这样调用：
queue.setConcurrency(2);
这将使队列始终最多执行两个任务，其余任务等待执行。
7. 执行任务
最后，我们要启动异步任务的执行：
queue.flush();
这样异步任务就开始顺序执行了，由于 @wordpress/priority-queue 函数的实现方式就是基础 Promise，一旦出现一个任务抛出异常，下面的所有任务都不会执行了，需要修改代码才能解决该问题。
示例代码
以下是一个完整的样例代码：
-- -------------------- ---- -------
-- ---
------ ------------- ---- ----------------------------
-- ----
----- ----- - --- ----------------
-- ----
--------------
-- -- --- --------------- -- ------------- -- ------------- -- -------- ---- -------
- --------- - -
--
--------------
-- -- --- --------------- -- ------------- -- ------------- -- -------- ---- ------
- --------- - -
--
--------------
-- -- --- --------------- -- ------------- -- ------------- -- -------- ---- ------
- --------- - -
--
-- ------
------------------------
-- ----
--------------总结
使用 @wordpress/priority-queue npm 包可以管理和处理异步任务的优先级，基于 Promise 的实现方式让它的使用非常方便。在开发中，多使用这种任务队列来优化网站的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e04cb3b0ab45f74a8bc16