简介
silly-barrier 是一个以 Promise 为基础的 npm 包，旨在为前端开发者提供一种更简洁、更高效的操作异步任务的方式。通过使用 silly-barrier，开发者可以轻松管理多个 Promise，以及在任务被执行前设置一些列的条件。同时，它还具备处理 Promise 出现异常的能力。
安装 & 引入
可以在 npm 上安装 silly-barrier。安装步骤如下：
npm install --save silly-barrier
在需要使用的代码里面引入 silly-barrier:
import SillyBarrier from 'silly-barrier';
使用方法
下面，我们将详细介绍 silly-barrier 的使用方法。首先我们需要创建一个 SillyBarrier 的实例：
const sillyBarrier = new SillyBarrier();
接下来，我们可以为该实例添加多个异步任务。任务可以是一个 Promise 对象或一个需要返回 Promise 对象的函数。例如：
-- -------------------- ---- -------
-- --- - -------
-------------------- --------------- -- -
------------- -- -
---------------------
----------
-- ------
----
-- --- - -------- ----- ------- - -------
------------------- -- --- --------------- -- -
------------- -- -
---------------------
----------
-- ------
----接着，我们可以在所有任务执行前设置一系列的条件。例如，我们可以通过 wait 方法等待其他的任务执行完成：
sillyBarrier.wait(() => {
console.log('task3 complete');
});这里，我们可以通过回调函数的方式，在任务执行完成后输出一些信息。
我们还可以使用 that 方法将上下文传递到任务中：
sillyBarrier.add(function() {
console.log(this);
}).that({ name: 'silly-barrier' });我们可以通过链式调用的方式设置条件：
sillyBarrier.wait(() => {
console.log('task1 is finished.');
}).wait(() => {
console.log('task2 is finished.');
});最后，我们可以通过调用 run 方法来执行任务：
sillyBarrier.run().then(() => {
console.log('All tasks are finished.');
});在所有的任务执行完毕后，我们可以在 then 方法里面执行一些处理结果的操作。当其中发生异常时，我们可以通过 catch 方法来处理异常：
sillyBarrier.run().then(() => {
console.log('All tasks are finished.');
}).catch(error => {
console.log('error:', error);
});示例代码
以下是一个使用 silly-barrier 的完整示例代码。我们将创建一个只有在所有图片加载完成后才会显示的背景图片。在图片加载完成之前，我们可以设置 ProgressBar 的显示，以及显示加载中的动画。
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
----------- -----
-
------------- -
----------------- --------
-------------- ----
-------- ------
------- -----
--------- -------
--------- ---------
------ -----
-
--------- -
----------------- --------
--------- ---------
---- --
----- --
------- --
------ --
----------- ----- --- -----
-
-------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
---------- -----
-
--------
-------
------
---- ---------------------
---- -----------------------
------
---- ----------------------
------- ---------------------------------------------------------------
--------
----- ------------ - --- ---------------
-- --- -------- --- -------
-------------------- -- -
----------------------------------------------------- - --------
---
-- --- ----- -----
-------------------------------------------- -- -
-------------------- --------------- -- -
---------- - --------
----
---
-- --- ------- ---- -------
-------------------- -- -
---------------------------------------------- - -------------
---
-- ---- ------- ----
-------------------- -- -
------------------------------------------------ - -------
---
-- --- ---------- ----- -------
-------------------- -- -
----------------------------------- - ----------------
---
-- ------ -------- ---
--------------------------- -
----- -------- - -----
--- -------- - --
-------------- -- -
-------- -- ------------------------ - -- - --
-- --------- - ---- -------- - ----
----------------------------------------------- - -------- - ----
-- -------- - -----
---
-------------------------- -- -
---------------- ------ --- ----------
---
---------
-------
-------现实应用
silly-barrier 的应用场景很广泛。在实际应用中，它可以帮助我们更好地处理一些异步任务，例如图片预加载、表单验证等。
总的来说，silly-barrier 是一个功能强大的 npm 包，它为前端开发者提供了一种更加方便、高效的操作异步任务的方式，可以在实际开发中大幅度减少代码量，加快代码执行速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055caa81e8991b448da0eb