在前端开发中,异步编程是一个不得不面对的问题。为了解决异步编程中的回调地狱问题,ES6 提供了 Promise 对象。然而,在现实开发中,有些情况下我们需要支持 ES5 的环境,而 Promise 对象又不被支持。这时候,就需要使用一个 polyfill,尤其是在编写库时可能需要提供开箱即用的 Promise 支持。
本文要介绍的就是一个 npm 包 promif,该包提供了对 Promise 的 polyfill 支持。本文将介绍该包的使用教程,同时也会解释其中的一些实现细节。
安装
使用 npm 安装:
npm i promif --save
原理
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 类。
如下所示:
const { Promise: PromifPromise } = require('promif'); class MyPromise extends PromifPromise { // ... your Promise implementation ... } const myPromise = new MyPromise((resolve, reject) => {/*...*/});
总结
若需要支持 ES5 环境下的 Promise,或者需要提供对 Promise 的开箱即用支持,使用 promif 是个不错的选择。本文简单介绍了该包的使用方法和实现原理,希望读者在实际开发中能得到一些启发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005593581e8991b448d6a4c