npm 包 promif 使用教程

阅读时长 4 分钟读完

在前端开发中,异步编程是一个不得不面对的问题。为了解决异步编程中的回调地狱问题,ES6 提供了 Promise 对象。然而,在现实开发中,有些情况下我们需要支持 ES5 的环境,而 Promise 对象又不被支持。这时候,就需要使用一个 polyfill,尤其是在编写库时可能需要提供开箱即用的 Promise 支持。

本文要介绍的就是一个 npm 包 promif,该包提供了对 Promise 的 polyfill 支持。本文将介绍该包的使用教程,同时也会解释其中的一些实现细节。

安装

使用 npm 安装:

原理

promif 的原理其实非常简单,就是将原生的 Promise 对象检测一下,如果原生不支持就手动实现一个 Promise 对象,并重新定义 Promise 的静态方法和实例方法,使得 promif 做到 100% 替换原生 Promise。

其实,这也是所有 polyfill 的原理,只不过都是对不同的对象进行 polyfill。

使用方法

promif 的使用方法也非常简单,只需要在需要使用 Promise 的地方,将原生的 Promise 对象替换成 promif 的即可。

以 setTimeout 为例,使用原生 Promise 的写法:

-- -------------------- ---- -------
----- ------------- - --- ----------------- ------- -- -
  ------------- -- -
    --------------- ---------
  -- -------
---

----------------------- -- -
  ------------------
---

使用 promif 的方式:

-- -------------------- ---- -------
----- - ------- - - ------------------
----- ------------- - --- ----------------- ------- -- -
  ------------- -- -
    --------------- ---------
  -- -------
---

----------------------- -- -
  ------------------
---

可以看到,将 require('promif') 的返回值赋值给了 Promise 变量,并在后续的代码中使用该变量,从而实现了对原生 Promise 的替换。

API

promif 提供的 API 和原生 Promise 是一样的,包括静态方法和实例方法,同时也提供了一个 version 属性来获取当前 promif 的版本号。

以下是 promif 提供的静态方法:

  • Promise.all(iterable)
  • Promise.race(iterable)
  • Promise.reject(reason)
  • Promise.resolve(value)

以下是 promif 提供的实例方法:

  • then(onFulfilled, onRejected)
  • catch(onRejected)
  • finally(onFinally)

值得注意的是,如果使用的是 ES6 的 class 语法定义 Promise 类,那么使用 promif 时需要把 class 名称改为 PromifPromise,然后将父类改为 promif 提供的 Promise 类。

如下所示:

总结

若需要支持 ES5 环境下的 Promise,或者需要提供对 Promise 的开箱即用支持,使用 promif 是个不错的选择。本文简单介绍了该包的使用方法和实现原理,希望读者在实际开发中能得到一些启发。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005593581e8991b448d6a4c

纠错
反馈