在前端开发中，我们经常需要在一些异步操作完成后执行一些特定的流程。比如在进行网络请求后需要根据响应数据进行展示或者其他处理。而在各种异步操作之间控制流的方式也千差万别。在这里，我介绍一种使用 npm 包 @art-of-coding/procedure-caller 进行控制流程的方法。
简介
@art-of-coding/procedure-caller 是一个方便快捷的 JavaScript 库，支持在一个异步操作完成后，自动根据一定的顺序调用下一个函数。通过使用该库，可以将异步操作的流程串联起来，避免回调噩梦。
安装
首先，我们需要通过 npm 安装该库。可以通过以下命令进行安装：
npm install @art-of-coding/procedure-caller
使用
使用 @art-of-coding/procedure-caller 的方式比较简单。首先，我们需要定义一个包含异步操作的数组：
-- -------------------- ---- -------
----- ----- - -
------------------ -
-- ---- -
-------------- ----- ----
--
------------------ -
-- ---- -
-------------- ----- ----
-
--在上述代码中，每个函数都接收一个 callback 函数作为参数。在异步操作完成后，需要通过调用该 callback 函数来通知 @art-of-coding/procedure-caller 下一个任务可以开始执行。
接着，我们需要创建一个 ProcedureCaller 实例，并执行该任务数组：
-- -------------------- ---- -------
----- --------------- - -------------------------------------------
----- --------------- - --- -----------------------
------------------------------------- -------- -
-- ----- -
-------------------
-------
-
---------------------
---上述代码中，我们创建了一个 ProcedureCaller 实例，并将上述定义的任务数组传入该实例。然后，我们调用 execute 方法来开始执行任务。该方法接收一个回调函数作为参数，其中 err 是错误对象，results 是返回的执行结果数组。
示例
下面，我将使用一个简单的示例来演示如何使用 @art-of-coding/procedure-caller。在该示例中，我们首先使用 axios 库进行一个 GET 请求，然后根据响应数据在页面上展示图片和图片标题。
首先，我们需要引入 @art-of-coding/procedure-caller 和 axios 库：
const ProcedureCaller = require('@art-of-coding/procedure-caller');
const axios = require('axios');接着，我们需要定义以下两个任务：
-- -------------------- ---- -------
-- ------
-------- ---------------------- -
-----
-----------------------------------------------------
-------------- -- -
-------------- ---------------
--
------------ -- -
----------------
---
-
-- ---------
-------- --------------- --------- -
----- --- - ------------------------------
------- - ---------
----- ----- - ----------------------------
--------------- - -----------
-------------------------------
---------------------------------
---------------
-在上述 code 中，getImageData 函数使用 axios 库发送 GET 请求获取图片数据。在获取到数据后，通过调用 callback 函数来通知 @art-of-coding/procedure-caller 下一个任务可以执行。showImage 函数用于在页面上展示图片和标题。
最后，我们将这两个任务传入 ProcedureCaller 实例，然后执行：
-- -------------------- ---- -------
----- ----- - -------------- -----------
----- --------------- - --- -----------------------
------------------------------------- -
-- ----- -
-------------------
-------
-
---------------------
---在上述代码中，我们将 getImageData 和 showImage 放到任务数组中，并创建了一个 ProcedureCaller 实例。在 execute 方法的回调函数中，我们简单地在控制台上打印了一条执行完毕的消息。
总结
@art-of-coding/procedure-caller 是一个方便快捷的 JavaScript 库，可以帮助我们将异步操作的流程串联起来，避免回调噩梦。通过该库，我们可以方便地控制异步操作之间的顺序，简化代码逻辑。在实际项目开发中，该库可以用于各种异步操作，从而使得前端开发更加便捷和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc57