简介
deferral 是一个 npm 包，专门用于处理异步回调的封装，主要应用场景在于异步调用代码中需要有先后顺序的执行，使用 deferral 可以避免代码中过于复杂的回调嵌套，提高代码可读性和可维护性。
安装 deferral
推荐使用 npm 进行安装：
npm install deferral使用示例
下面列出几个示例代码，方便大家了解如何使用 deferral。
示例一：顺序执行异步回调
在这个示例中，有两个异步函数 asyncFunction1 和 asyncFunction2，它们的执行顺序不能混淆，需要按照顺序执行。
-- -------------------- ---- ------- ----- -------- - -------------------- -------- ------------------------ - ------------- -- - --------------------------- ------- ----------- -- ------ - -------- ------------------------ - ------------- -- - --------------------------- ------- ----------- -- ----- - ----- ----- - ----------- ------------------------------ ------------------------------ -------------- -- - ---------------- ------- ---展开代码
运行结果：
asyncFunction1 done asyncFunction2 done all done
示例二：多个异步函数等待执行完成
在这个示例中，有三个异步函数 asyncFunction1、asyncFunction2 和 asyncFunction3，它们的执行顺序没有要求，但是它们都需要执行完成后，才能执行下一步操作。
-- -------------------- ---- ------- ----- -------- - -------------------- -------- ------------------------ - ------------- -- - --------------------------- ------- ----------- -- ------ - -------- ------------------------ - ------------- -- - --------------------------- ------- ----------- -- ----- - -------- ------------------------ - ------------- -- - --------------------------- ------- ----------- -- ----- - ----- ----- - ----------- ------------------------------ ------------------------------ ------------------------------ -------------- -- - ---------------- ------- ---展开代码
运行结果：
asyncFunction2 done asyncFunction3 done asyncFunction1 done all done
API 文档
创建 deferral
const queue = deferral();
添加待执行的异步函数
queue.defer() 返回一个新的回调函数，在异步函数执行完成后被调用，通知 deferral 异步函数执行完成。
asyncFunction1(queue.defer()); asyncFunction2(queue.defer()); asyncFunction3(queue.defer());
等待所有异步函数执行完成
queue.await() 用于设置所有待执行的异步函数执行完成后需要执行的回调函数。
queue.await(() => { console.log('all done'); });
结语
在实际应用中，异步调用的执行顺序和结果处理往往是前端开发中需要重点考虑的问题，deferral 提供了一种简洁、易用的解决方案。希望本篇文章可以帮助各位前端爱好者更好地理解和应用 deferral。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/deferral
