在前端开发中，我们常常会遇到需要串行执行一些异步任务的情况，如先请求数据，再渲染页面。在 Node.js 环境下，我们可以使用 async 和 await 关键字来解决这个问题，但在浏览器环境下，这些关键字并不支持，因此我们需要借助工具来实现。这里介绍一款 NPM 包 sequently，它可以帮我们轻松地实现异步任务串行执行。
什么是 sequently
sequently 是一个轻量级的工具，它使得异步任务按指定顺序运行，可以理解为是一个简化的 promise 链工具。它支持传递参数、异步的返回结果也可以作为下一个任务的参数使用。由于 sequentially 极其简单易用，已经成为了实现一些常见任务的首选。
使用说明
sequentlly 通过链式调用的方式来完成异步任务的串行化，这样的语法结构使得代码变得易读和易维护。
基础使用方法
要使用 sequentially，我们首先需要用 NPM 安装它：
npm install sequently
安装完成后，我们只需要引入 sequently：
const sequently = require('sequentially');需要注意的是 sequentially 是同步的，所以我们需要把每个异步函数并行运行。
接下来，我们就可以开始创建任务链了。这里以两个简单的示例来说明：
-- -------------------- ---- -------
-- ------ - ---- --------
----- ------- - ----- -- -- -
----- ------------
----------------------
--
-- ------ - ---- ---------
----- ------- - ----- -- -- -
----- ------------
-----------------------
--
-------- --------- -
------ --- ----------------- ------- -- -
------------------- ----
---
-
-- -- ------------ -----
---------------------- ----------在这个示例中，我们创建了两个异步任务函数 taskOne 和 taskTwo，它们分别输出 'First!' 和 'Second!' ，并且 taskOne 的延迟时间比 taskTwo 短。最后我们使用 sequentially 将任务串起来，并执行它们。需要注意的是 sequentially 并不会改变原有函数的返回值，所以 taskOne 和 taskTwo 直接输出结果即可。
传递参数
为了在每个任务之间传递数据，我们可以在 tasks 数组对象中的每个函数中传递一些参数。例如：
-- -------------------- ---- -------
-- -----------------------
----- ------- - ----- -- -- -
----- ------------
------ ---------
--
----- ------- - ----- ------ -- -
----- ------------
------------------
--
-- -- ------------ -----
---------------------- --------- -
----- ----------
---由于我们需要把 taskOne 的输出作为 taskTwo 的输入，这里通过 sequentially 的参数传递机制将数据传递给 taskTwo 。
异步返回值
如果我们希望某个任务中的异步操作的返回值能被下一个任务使用，并按指定顺序运行，我们需要显式地把返回值传递给下一个任务。例如：
-- -------------------- ---- -------
-- -------------- - ---- - ------
----- ------- - ----- -- -- -
----- ----- - ----------
----- ------------
------ ------
--
----- ------- - ----- ------ -- -
----- ------------
--------------------
----------------------- ----
------ -----
--
-- -- ------------ -----
---------------------- ----------在这个示例中，我们可以看到在任务一中声明了一个变量 words，这个变量被传递给任务二并作为下一个任务的输入。而在任务二中，我们向数组中添加一个元素，并输出最终结果。同时，taskTwo 返回值也会被下一个任务使用。这使得我们可以在任务链中传递异步任务的结果，实现数据的处理。
总结
sequentially 是一个非常简单易用的异步任务串行器，可以让我们避免开发过程中异步代码的混乱。通过链式调用的方式，它提供了一种清晰易懂的模式来组合各种异步任务。我们可以使用 sequentially 同步同一个数组、将第一个任务的输出传递给下一个任务，或者将异步返回值传递给下一个任务来实现各种功能。
在实际开发中，我们可以把 sequentially 作为核心工具来组合其他前端库和框架，实现复杂的业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53df2