npm 包 promiseful 使用教程

阅读时长 8 分钟读完

在前端开发过程中,经常会用到异步代码。而使用异步代码,就不可避免地要处理回调函数。为了解决回调函数导致的“回调地狱”问题,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

纠错
反馈