在前端开发过程中，经常会用到异步代码。而使用异步代码，就不可避免地要处理回调函数。为了解决回调函数导致的“回调地狱”问题，Promise 应运而生。使用 Promise 可以让异步代码更加优雅和可读。而在使用 Promise 的过程中，我们常常需要使用一些常用方法，如：Promise.all(), Promise.race()等等。在本篇文章中，我们将介绍一个非常实用的 npm 包 promiseful，它能够让我们在使用 Promise 的时候更加高效、简约。下面，让我们一起来学习它的使用教程。
什么是 promiseful？
promiseful 是一款优化 Promise API 的 npm 包。它提供了许多实用的方法，如：promiseful.timeout()、promiseful.deferred()、promiseful.delay() 等等。使用 promiseful，我们可以避免手写一些重复的代码，并且让我们的代码看起来更加优雅。
promiseful 的安装
要使用 promiseful，需要在项目中安装 promiseful 包。我们可以使用 npm 进行安装：
--- ------- ----------
promiseful 的常用方法
promiseful.timeout(promise, timeout)设置一个 Promise 的超时时间，如果超时，则会触发一个异常。promise参数为需要设置超时时间的 Promise 实例；timeout为超时时间。promiseful.deferred()创建一个可以手动控制状态的 Promise 实例。返回值是一个包含 resolve 和 reject 方法的对象。可以在需要的时候手动将 Promise 设置为完成状态。promiseful.delay(time)延迟执行 Promise 的 resolve 回调函数。time为延迟毫秒数。promiseful.map(array, mapperFunc)类似于 Array.map() 方法，但适用于 Promise 对象数组。array参数为 Promise 数组；mapperFunc为映射函数，它接受一个 Promise 实例作为参数，内部返回一个新的 Promise 实例。promiseful.filter(array, filterFunc)类似于 Array.filter() 方法，但适用于 Promise 对象数组。array参数为 Promise 数组；filterFunc为筛选函数，它接受一个 Promise 实例作为参数，返回一个 bool 值，用于判断 Promise 是否符合条件。
promiseful 的应用
1. 使用 promiseful.timeout() 方法
当我们调用一个异步方法时，如果这个异步方法需要执行很长时间，我们可以使用 promiseful.timeout() 规定一个最大的等待时间，如果异步方法在规定时间内没有返回结果，则抛出一个异步异常。
举个例子，我们在浏览器中调用了一个请求地址的异步方法：
-------- ---------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -----
---------- - -- -- --------------------------
----------- - -- -- -----------------------
-----------
---
-现在我们可以使用 promiseful.timeout() 方法来规定一个最大等待时间：
----- ------------ - ------------------------------ ------ -------------------------- -- ------------------------ ---------- -------- -- ------------------- ----------------
上面代码中，我们使用 promiseful.timeout() 方法对 fetch(url) 这个异步方法进行了封装，并规定其最大等待时间为 3000 毫秒。这样，当异步请求执行时间超过 3000 毫秒时，将会抛出一个异常。
2. 使用 promiseful.deferred() 方法
promiseful.deferred() 方法返回一个新的 Promise 对象，这个 Promise 对象可以手动设置 resolve 或 reject 状态。这在某些情况下非常实用，比如我们想写一个方法，这个方法能够在自定义的条件下返回一个 Promise 对象。下面是一个例子：
-------- ------------------ -
----- -------- - ----------------------
-- ---------- -- -------------- -
---------------------- --- ---- --------------
- ---- -
------------------------ ---- --------
-
------ -----------------
-上面代码中，我们编写了一个 registerUser() 方法。当输入的 user 信息不合法时，我们手动设置这个 Promise 的状态为 reject，当输入的 user 信息符合条件时，我们手动设置这个 Promise 的状态为 resolve。
3. 使用 promiseful.delay() 方法
在某些情况下，我们想要在执行异步操作之前延迟一段时间，比如执行一些动画或者等待 5 秒钟再执行异步操作。这时，我们可以使用 promiseful.delay() 方法。
举个例子，我们想要等待 5 秒之后再执行异步操作：
----- -------- ----------- -
----- -----------------------
------ -----------
-上面代码中，我们使用 async/await 来执行异步操作，在异步执行之前，我们使用 promiseful.delay() 方法设置等待 5 秒之后再执行异步操作。
4. 使用 promiseful.map() 方法
有时候，我们需要遍历一个 Promise 对象数组，并将遍历结果重组成一个新的 Promise 数组。这时，我们可以使用 promiseful.map() 方法。
举个例子，我们有一个 Promise 数组，数组中的每个 Promise 都返回一个数字。现在我们想将这个 Promise 数组中的数字累加，并返回一个新的 Promise 对象：
----- -------- - -
--- ----------------- ------- -- ------------
--- ----------------- ------- -- ------------
--- ----------------- ------- -- ------------
--
----- --- - ------------------------ ----- --- -- -
----- --- - ----- --
------ --- - --
------------- -- -
----- --- - -------------- -- -- - - ---
----------------- -- -
---上面代码中，我们使用 promiseful.map() 方法，将数字加 1，然后返回一个新的数组。最后，我们使用 reduce() 方法将数组中的数字累加。
5. 使用 promiseful.filter() 方法
有时候，我们需要使用 Promise 数组进行一些筛选操作。这时，我们可以使用 promiseful.filter() 方法。
举个例子，我们有一个 Promise 数组，数组中每个 Promise 运行后返回一个对象，对象中包含这个 Promise 是否被完成的状态值。现在我们想将数组中未被完成的 Promise 筛选出来：
----- -------- - -
--- ----------------- ------- -- -
------------- -- -
--------- ------- ----- ---
-- ------
---
--- ----------------- ------- -- -
------------- -- -
--------- ------- ---- ---
-- ------
---
--- ----------------- ------- -- -
------------- -- -
--------- ------- ----- ---
-- ------
---
--
----- -------- - --------------------------- ----- --- -- -
----- --- - ----- --
------ ------------
------------- -- -
----------------- -- -- ------- ----- -- - ------- ----- --
---上面代码中，我们使用 promiseful.filter() 方法筛选出未被完成的 Promise，最终将这些未被完成的 Promise 组成一个新的数组返回。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055aa481e8991b448d81e2