介绍
@esfx/async-queue 是一个异步任务队列管理的 npm 包。通过该工具可以方便地管理异步任务的执行顺序、并行度等属性。如果你正在开发一款前端项目，苦于异步任务较多，又需要一个可靠的任务队列来管理它们的执行顺序，那么本文介绍的该工具可能会有所帮助。
安装
该包可以通过 npm 安装：
npm install @esfx/async-queue
使用
当安装好该包之后，就可以引用它的命名空间和类型。其中命名空间为 AsyncQueue，类型为 AsyncQueueOptions。在使用该包之前，首先需要对异步任务队列进行初始化。对于这个需求，AsyncQueue 提供了 create 接口，如下所示：
import { AsyncQueue } from "@esfx/async-queue";
const queue = AsyncQueue.create({
concurrency: 2, // 并行度
autoStart: true, // 是否自动开始任务队列
});上述代码中，通过调用 AsyncQueue.create() 初始化了一个异步任务队列，其并行度为 2，是否自动开始任务队列可通过 autoStart 参数指定。在调用 create 方法时，还可以通过第二个参数进行更复杂的设置，例如：
-- -------------------- ---- ------- ------ - ---------- - ---- -------------------- ----- ----- - ------------------- ------------ -- ---------- ----- -------------- ----- ---------------- -- ------------ ----- ---------- ----- --------------------- ----- -- - ------------- ----------- ------------- ------------ ---- -- -- ----------- ------------ ------------- --- -- -- ---------- ---
上述代码中，第二个参数为一个 AsyncQueueOptions 类型的变量，通过它可以设置更详细的选项，例如延迟执行等。如果运行环境不支持全局 setImmediate 或 performance，还可以通过该参数覆盖掉。
在初始化队列之后，就可以往里面添加异步任务了。常见的任务添加方式如下：
-- -------------------- ---- ------- ------------------- -- -- - ----- ------------------- ---- --- ------------------- -- -- - ----- ------------------- ---- --- ------------------- -- -- - ----- ------------------- ---- ---
上述代码中，使用 enqueue 方法将三个异步函数添加到了任务队列中。这些函数将依照入队的顺序依次执行。
在添加完任务之后，还可以对队列状态进行查询和调整。例如，可以通过以下代码查询队列是否处于活动状态：
const isActive = queue.isActive;
还可以通过如下代码手动暂停或恢复任务队列的工作：
queue.pause(); queue.resume();
通过调用 queue.clear() 方法可以清除队列中所有的已添加任务。如果需要在队列中添加任务后，等待所有任务执行完成之后再做一些事情，可以使用如下代码：
await queue.whenAllSettled();
console.log("All tasks done!");示例
接下来，假设我们有一个程序，需要爬取几个网站的数据并存储到本地。该程序使用多进程模式运行，且每个进程只能在一个 CPU 核上跑。我们现在需要通过异步任务队列来解决该问题。
首先，我们需要针对该程序编写一个简单的异步任务队列，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ ----- --------- -
------- ------ -------------------
------------- -
---------- - -------------------
------------ --
---
-
------ ------------- ------- -
------ ------------------------ -- -- -
----- ---------------------
---
-
-上述代码中，我们使用 AsyncQueue 来创建了一个只能并行处理一个任务的队列。pushTask 方法则将异步函数推入队列中。
接下来是下载内容的异步函数示例：
-- -------------------- ---- -------
------ ------- ---- ----------
------ -- ---- -----
----- -------- -------------------- ------- -
----- --- - ----- --- ----------------- ------- -- -
------------ ------- --------- ----- -- -
-- ------- -
------ --------------
-
--------------
---
---
-------------------------- ---- ----- -- -
-- ----- -
----- ----
-
---------------- ---- --- ---------
---
-上述代码中，我们下载了一个网站的内容，并将其存储到本地文件中。需要注意的是，这里使用了异步 API fs.writeFile()。如果将该函数作为任务添加到队列中，那么可能会有多个任务同时使用该 API，导致程序不稳定。因此，建议使用上文提到的任务队列来确保任务按顺序执行。
最后，我们可以通过如下代码执行任务队列：
const taskQueue = new TaskQueue();
taskQueue.pushTask("https://www.google.com");
taskQueue.pushTask("https://www.apple.com");
taskQueue.pushTask("https://www.microsoft.com");上述代码中，我们首先创建了一个任务队列的示例 taskQueue。之后，我们分别添加了三个不同的异步函数，用于下载三个不同网站的数据。
总结
本文对 npm 包 @esfx/async-queue 的使用教程进行了详细介绍。通过该包，我们可以方便地管理异步任务的执行顺序和并发度等属性。如果您正在开发一款前端项目，需要对异步任务进行合理的管理，那么可以尝试使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef9ba77403f2923b035b9f5