简介
callback-collector 是一个能够帮助前端开发者收集异步回调函数的 npm 包。在前端开发过程中，我们经常会遇到需要多次异步请求，在最后一个请求完成后执行某些操作的情况。此时，我们需要对每个异步回调函数进行手动记录，这样会给开发带来一定的负担。callback-collector 的出现可以帮助我们自动记录异步回调函数，避免手动操作的繁琐。
安装
npm install callback-collector
使用方法
初始化
在使用 callback-collector 之前，我们需要在项目中引入它：
const CallbackCollector = require('callback-collector');然后，我们需要初始化一个 CallbackCollector 对象：
let collector = new CallbackCollector();
添加异步回调函数
当我们需要添加一个异步函数的回调函数到 callback-collector 中时，只需要将回调函数作为参数传入即可：
setTimeout(() => {
console.log('Hello world!');
collector.addCallback();
}, 1000);可以看到，我们在异步函数 setTimeout 的回调函数中添加了 collector.addCallback()，表示这个回调函数被 callback-collector 记录了下来。
我们还可以使用 collector.addCallbackAsync() 添加一个异步返回 Promise 的回调函数。使用方法如下：
-- -------------------- ---- -------
-------- ----- ---------- -
------ --- --------------- -- -
------------- -- -
------------------ --- ---------- - ----- -----------
----------
-- ----------
---
-
----- -----------
-------- -- ------------------------------可以看到，我们首先使用 async 函数定义了一个返回 Promise 的异步函数 sleep()，每次调用此函数会等待指定时间后才会执行下一步操作。在 sleep() 的 Promise 对象中，我们调用了 resolve() 函数将异步操作标记为已完成。然后，在异步执行回调函数时，我们使用了 await 操作符，表示等待 sleep() 函数执行完毕后再执行回调函数，并使用了 collector.addCallbackAsync() 将其添加到 callback-collector 中。
判断异步操作是否全部完成
当我们需要在所有异步回调函数完成后执行某些操作时，可以使用 collector.wait() 方法。它可以等待所有异步操作完成后自动执行回调函数。
collector.wait(() => {
console.log('All async functions are done!');
});在这里我们传入一个回调函数，用于在所有异步操作完成后执行必要的操作。可以看到，使用了 callback-collector 后，我们无需自己手动管理异步函数的状态，而是可以自动完成对异步操作的细致管理。
示例代码
下面是一个完整的示例代码，演示了如何使用 callback-collector 收集异步函数回调。
-- -------------------- ---- -------
----- ----------------- - ------------------------------
--- --------- - --- --------------------
-------- ----- ---------- -
------ --- --------------- -- -
------------- -- -
------------------ --- ---------- - ----- -----------
----------
-- ----------
---
-
------------- -- -
------------------ ---------
------------------------
-- ------
-----------
-------- -- ------------------------------
----------------- -- -
---------------- ----- --------- --- --------
---当我们执行上述代码时，可以看到控制台输出了以下内容：
Slept for 2 seconds. Hello world! All async functions are done!
在这个例子中，我们分别使用了 setTimeout() 和 sleep() 添加了两个异步函数的回调函数到 callback-collector 中，然后在 collector.wait() 中等待所有异步回调函数完成后执行指定操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde5902