前言
在开发中，我们经常会遇到需要前端项目并发加载的情况，如多张图片的预加载、多个接口同时请求等。对于这些需求，npm 包 racy 可以帮助我们实现。
什么是 racy？
racy 是一个基于 Promise 的并发加载库，可以提高前端项目性能及后期维护效率。
racy 的安装和引入
在项目中使用 npm 安装 racy ：
--- ------- ----
在需要使用的 js 文件中引入 racy 库：
------ ---- ---- ------
racy 的使用
racy 的 API 比较简单，并发操作主要依赖于 all() 方法的支持。
基本用法
接下来，我们通过一个加载图片的小示例来介绍 racy 的基本用法。
------ ---- ---- ------
-- ----
----- ------- - -
-----------------------
-----------------------
-----------------------
----------------------
-
-- -----------
--- ----------- - -
-- --------
----- ----------- - -------------------- -- -
------ --- ----------------- ------- -- -
----- --- - --- -------
---------- - -- -- -
-------------
---------
-
----------- - ----- -- -
-----------
-
------- - ------
--
--
-- --------
----------------------------- -- -
--------------- ----------------- -----------
-------------- -- -
---------------------- ----
--
上述代码中，我们首先定义了一个图片列表，包含了需要加载的所有图片 URL。然后创建了一个 Promise 对象列表 loadImgTask，每个 Promise 对象都是加载一张图片的 Promise 实例，通过 Promise 的 resolve() 和 reject() 方法记录图片的加载状态，最终通过 Racy 库的 all() 方法并发执行所有 Promise，等所有 Promise 加载完成后，最后执行对应的回调函数。
进阶用法
除了 all() 方法，racy 库还支持 race() 方法和 limit() 方法的使用。
race() 方法
race() 方法可以返回最快完成的 Promise 对象的值或者状态。
----- -- - --- ----------------- ------- -- -
------------------- ---- -----
--
----- -- - --- ----------------- ------- -- -
------------------- ---- -----
--
-------------- ----
------------- -- -
------------------ -- ----
--上述代码中，我们创建了两个 Promise 对象 p1 和 p2，分别延迟 500ms 和 200ms 来触发 resolve() 方法，最后通过 Racy 的 race() 方法获取到最快完成的 Promise 实例的值。
limit() 方法
limit() 方法可以限制并发执行的任务数量。
----- -------- - --- ---------------------------- ------ -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- -------- ------
--------------
-- ------------------------ - ------
--
--
-------------------- --
-------------- -- -
------------------------- -------
--上述代码中，我们创建了 10 个 Promise 实例，每个实例会在延迟一定时间后打印出任务编号并返回该实例的编号。最后通过 Racy 的 limit() 方法控制同一时间并发任务数为 3，最终输出所有任务执行完毕的编号。
总结
racy 库为我们前端并发加载提供了一个很好的方案，并提高了前端项目的性能及后期维护效率。熟练使用 racy 库的 API 对于提高前端开发效率及成就感也有很大帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5451ab1864dac669a3