在日常前端开发中，经常会遇到需要等待多个异步操作全部完成后再执行某些操作的情况，比如需要请求多个接口获取数据后再渲染页面。而 ES10 新增的 after 和 before 函数提供了一种简单优雅的方式来控制异步任务的执行顺序，从而避免了 callback hell 或者手动维护计数器的繁琐操作。
深入探讨 after 和 before 函数的实现原理
在介绍具体使用方式之前，我们先来了解一下这两个函数的实现原理。after 函数的作用是在指定异步任务全部完成后执行一段函数，而 before 函数的作用则是在所有异步任务开始之前执行一段函数。
假设我们需要请求三个接口获取数据，完成后需要将数据进行合并并进行渲染操作：
-- -------------------- ---- ------- ----- --------- - ----- -- - ------ ------------------- -- ------------ - ------------- ------------------ ------------------ ----------------- ---------------- ------ ------- -- - ----- ------- - ---------- --------- ---------- -- - ------- ------ --
这段代码可以很好地完成我们的需求，但是随着异步任务个数的增多，这种方式将变得越来越难以维护。而使用 after 函数可以最大程度地解耦异步任务的执行顺序：
-- -------------------- ---- -------
----- ----- - ------- --------- -- -
------ -- -- -
-- -------- --- -- -
-----------
-
-
-
----- --------- - ----- -- -
------ ------------------- -- ------------
-
----- -------------- - -------- -- -- -
---------------- ---- ----------
--
---------------------------------------
---------------------------------------
---------------------------------------这里定义了一个 after 函数，接受两个参数：count 表示异步任务个数，callback 表示当所有异步任务全部完成后需要执行的函数。返回一个匿名函数，在其中维护一个计数器，每次异步任务完成时调用此匿名函数，计数器减一，当计数器减至 0 时，调用 callback 函数。
这样，我们就可以将每个异步任务的 then 方法交由 after 函数来处理，并传入一个共同的 afterFetchData 来获取异步任务的执行结果。所有异步任务完成后，afterFetchData 函数会被调用，执行合并数据并渲染操作的代码。
类似地，before 函数也是通过一个计数器来控制异步任务的执行。当所有异步任务都开始执行后，调用 before 函数传入的回调函数。
-- -------------------- ---- -------
----- ------ - ------- --------- -- -
--- ------ - ------
------ -- -- -
-- --------- -
------ - -----
-----------
-
-
-
----- --------- - ----- -- -
------ ------------------- -- ------------
-
----- --------------- - --------- -- -- -
------------------ -- ----- -------
--
------------------
---------------------------------------
---------------------------------------
---------------------------------------这里定义了一个 before 函数，接受两个参数：count 表示异步任务个数，callback 表示所有异步任务均已开始执行后需要执行的函数。返回一个匿名函数，在其中维护一个 called 变量，表示是否已经调用过 callback 函数，当所有异步任务都开始执行时，调用 before 函数返回的匿名函数会检查 called 变量的值，只有当它为 false 时才调用 callback 函数。
示例代码
-- -------------------- ---- -------
----- ----- - ------- --------- -- -
------ -- -- -
-- -------- --- -- -
-----------
-
-
-
----- ------ - ------- --------- -- -
--- ------ - ------
------ -- -- -
-- --------- -
------ - -----
-----------
-
-
-
----- --------- - ----- -- -
------ ------------------- -- ------------
-
----- -------------- - -------- -- -- -
---------------- ---- ----------
-- - ------- ------
--
----- --------------- - --------- -- -- -
------------------ -- ----- -------
--
------------------
---------------------------------------
---------------------------------------
---------------------------------------总结
ES10 新增的 after 和 before 函数能够帮助我们很好地解决控制异步任务顺序的问题，通过计数器的维护，可以轻松地控制异步操作的执行顺序，代码可读性和可维护性得到很大提升。此外，使用 after 和 before 函数还可以避免手动维护计数器和 callback hell 的烦恼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f986dcf6b2d6eab310402c