前言
在前端的开发工作中，我们经常需要处理异步任务，例如在渲染 DOM 前需要等待 AJAX 请求或者获取数据处理完毕。在 JavaScript 中，异步任务的处理一般采用回调函数或者 Promise。然而，当我们需要处理多个异步任务时，使用这些方法会变得非常繁琐和不易理解。此时，我们可以使用 foreachasync 这个 npm 包，使异步任务的处理更加简单。
foreachasync 是什么？
foreachasync 是一个轻量级又实用的 npm 包，可以轻松处理多个异步任务。它可以依次执行一组异步任务，并支持串行和并行执行两种方式。同时，foreachasync 也支持 Promise 和回调函数两种方式。
安装
在使用 foreachasync 之前，必须先安装它。你可以使用 npm 包管理器来安装 foreachasync，具体命令如下：
npm install foreachasync
使用方法
使用 foreachasync 很容易，你只需要调用它的 forEachAsync 方法，传入需要执行的异步任务，即可。
-- -------------------- ---- -------
----- ------------ - ------------------------
---------------------- -------- ---------
------ ------ ----- -- -
-- ------
--------------------- - ------
------------- -- -
--------------------- - ------
-------
-- ------------- - ------
--
-- -- -
-------------------------
---上述代码先使用 forEachAsync 方法遍历了一个包含三个数据的数组，即 ['data1', 'data2', 'data3']，并执行了每个数据的处理函数。处理函数会通过参数传递当前处理的数据、索引和下一个异步任务处理函数。在实际执行过程中，处理函数会随机延时一定时间后，再输出处理完成的日志。当遍历完成后，输出全部数据处理完成的日志。
参数说明
forEachAsync 方法接受三个参数，依次为：
- tasks: 必填，要执行的任务数组。
- handler: 必填，每个任务要执行的函数。
- callback: 可选，当全部任务完成后调用的函数。
tasks 可以是普通数组或对象，handler 是每个异步任务的处理函数。callback 函数会在所有任务执行完后调用。另外，handler 函数传递了三个参数：
- currVal: 当前正在处理的值。
- currIndex: 当前值的索引。
- next: 函数，可以传递一个回调函数作为下一个异步任务的处理函数。
串行执行
默认情况下，foreachasync 采用并行方式执行异步任务。如果你想按照顺序依次执行每个异步任务，可以采用串行执行。在 handler 函数中，调用 next() 函数后会执行下一个异步任务。
-- -------------------- ---- -------
-----------------
----- ---- ----- -- -
----------
----------- ----- -- -
------- -----------
---
--
-- -- -
-------------------------
---并行执行
除了串行执行外，foreachasync 也支持并行执行。只需要在 handler 函数中不再使用 next() 函数即可，这样所有异步任务会一起执行，但 callback 函数会等待所有任务完成后才会执行。
-- -------------------- ---- -------
-----------------
----- ------ -- -
----------
----------- ----- -- -
--------------- - ----------
---
--
-- -- -
-------------------------
---使用回调函数
除了 Promise 外，foreachasync 也支持回调函数方式。当 handler 函数传递一个回调函数时，foreachasync 会将其视为使用回调函数方式。异步任务执行完成后将通过回调函数返回异步处理结果。
-- -------------------- ---- -------
-----------------
----- ------ ----- -- -
--------------
----------- ----- -- -
--------------- - ----------
-----------
---
--
-------- -- -
-------------------------
---使用 Promise
当 handler 函数返回一个 Promise 对象时，foreachasync 会将其视为使用 Promise 方式。异步任务处理完成后，foreachasync 会等待所有 Promise 执行完成后才会调用 callback 函数。
-- -------------------- ---- -------
-----------------
----- ------ -- -
---- ------- ------
------ --- ----------------- ------- -- -
----------- ----- -- -
--------------- - ----------
--------------
---
---
-------------- -- -
-------------------------
------------ -- -
-------------------------
---示例代码
下面是使用 Promise 方式对 Github API 进行测试的示例代码：
-- -------------------- ---- -------
----- ----- - ----------------------
----- ------------ - ------------------------
----- ---- - -
----------------------------------------
--------------------------------------
--------------------------------------
-----------------------------------------
--
------------------
----- -- -
------ ----------
--------- -- -----------
---------- -- -
------------------------
--
---------- -- -
-------------------------
---
---------- -- -
-------------------------
------------ -- -
-------------------------
---上述代码首先定义了一个包含 Github 用户信息的 API，然后使用 forEachAsync 方法遍历该数组。在处理函数中，使用 Promise 方式获取每个用户的信息，并输出用户的登录名。当所有异步任务执行完成后，输出“全部任务执行完成”的日志。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/foreachasync