Top 5: Best Javascript Promises Polyfills

Top 5: Best Javascript Promises Polyfills

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

The idea of the Polyfill is to provide support for the Promise API in out dated browsers, but using the same coding flow:

var prom = new Promise(function(resolve, reject) {
    // do a thing, possibly async, then…

    if (/* everything turned out fine */) {
        resolve("Stuff worked!");
    }  else {
        reject(new Error("It broke"));
    }
});


// For IE +10
prom.then(function(result) {
    // Do something when async done
}).catch(function(err){
    // Rejected
});

// Or for IE-9, where catch is a reserved keyword
// For IE +10
prom.then(function(result) {
    // Do something when async done
}, function(err){
    // Rejected
});

With any of the following Polyfills, you'll be able to use the Promise API in any old webbrowser in the same way you do with new browsers.

Enjoy our collection of 5 of the best Polyfill for the Promise API in Javascript.

5. ES6 Promise Polyfill

This is a polyfill of ES6 Promise. The implementation based on Jake Archibald implementation a subset of rsvp.js. If you're wanting extra features and more debugging options, check out the full library.

The main target of this library is the implementation of the Javascript Promises that are conformance with browser's implementations and to be minimal as possible in size. So it's strictly polyfill of ES6 Promise specification and nothing more. It passes both Promises/A+ test suite and rsvp.js test suite. And as small as 2,6KB min (or 1KB min+gzip).

4. Promise Polyfill

Lightweight ES6 Promise polyfill for the browser and node. Adheres closely to the spec. It is a perfect polyfill IE, Firefox or any other browser that does not support native promises. This implementation provides support to browsers since IE8+, Chrome, Firefox, IOS 4+, Safari 5+, Opera.

By default promise-polyfill uses setImmediate, but falls back to setTimeout for executing asynchronously. If a browser does not support setImmediate (IE/Edge are the only browsers with setImmediate), you may see performance issues. Use a setImmediate polyfill to fix this issue. setAsap or setImmediate work well.

If you polyfill window.setImmediate or use Promise._immediateFn = yourImmediateFn it will be used instead of window.setTimeout

3. BluebirdJS

Bluebird is a fully featured promise library with focus on innovative features and performance. BluebirdJS allows you to create a new promise. The passed in function will receive functions resolve and reject as its arguments which can be called to seal the fate of the created promise.

To make sure a function that returns a promise is following the implicit but critically important contract of promises, you can start a function with new Promise if you cannot start a chain immediately.

2. Native Promise Only

Native Promise only is a polyfill for native ES6 Promises as close as possible (no extensions) to the strict spec definitions. The aim of this project is to be the smallest polyfill for Promises, staying as close as possible to what's specified in both Promises/A+ and the upcoming ES6 specification.

An equally important goal is to avoid exposing any capability for promise-state to be mutated externally. The Known Limitations section explains the trade-offs of that balance. A promise object from this polyfill will be an instance of the Promise constructor, which makes identification of genuine promises easier.

1. ES-6 Promise (subset of rsvp.js)

This is a polyfill of the EcmaScript6 Promise. The implementation is a subset of rsvp.js extracted by @jakearchibald, if you're wanting extra features and more debugging options, check out the full library.

catch is a reserved word in IE<9, meaning promise.catch(func) throws a syntax error. To work around this, you can use a string to access the property as shown in the following example.

However, please remember that such technique is already provided by most common minifiers, making the resulting code safe for old browsers and production:

promise['catch'](function(err) {
     // ...
});

If you know another awesome Promises polyfill, please share it with the community in the comment box. Happy coding !

Become a more social person