Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding promise polyfill to ES6

I have a React project written in ES6. It is compiled using Babel and works quite well. Except for one promise (of many!) that acts up only in IE, for which I already know - has no support for promises. So I immediately thought to add a polyfill to supply promises for IE, but then I was like "Hold up, you're already writing ES6 and isn't that compiled into ES5 anyways?" Who would know better than SO?
So is there any sense in adding a polyfill such as es6-promise to my project? And if there is, how should I use it syntactically? For now I only have the import but I should probably implement it somehow as well?

import Promise from 'es6-promise';

Also here's the promise that causes problems in IE, perhaps I have a syntax error that I haven't noticed myself! :)

new SingleObjectResource(DJ_CONST.API.setLanguage)
    .put(null, {language_code: theLanguage})
    .then(
        function() {
            window.location.reload();
        }
    );
like image 845
wanaryytel Avatar asked Dec 16 '15 08:12

wanaryytel


2 Answers

I had the same situation & was very frustrated as i had to deploy production app, The problem i had was with Promises from fetchjs. This is what i do to save my life

npm install --save es6-promise //first install as a dependency & then added in broswerify as dependency.

and then in my main JS file, justed called this

   import "es6-promise/auto";

as from here https://github.com/stefanpenner/es6-promise#auto-polyfill

basically, its alternative syntax of

require('es6-promise').polyfill();

Basically, Under the hood The polyfill() method will patch the global environment (in this case to the Promise name) when called.

Note: i was using gulp with browserify.

like image 186
Danish Avatar answered Oct 14 '22 20:10

Danish


I couldn't edit my previous response earlier as I received the review comment in the night when I was offline... re-posting my response with embedded information per the review feedback. Thanks.

Why not use bluebird everywhere? Its faster than the native promises. And polyfills for IE too. And I don't work for them :).

EDIT:

Using bluebird instead of native promise -

const Promise = require('bluebird');

1. Added perf comparisons -

results for 10000 parallel executions, 1 ms per I/O op

file                                     time(ms)  memory(MB)
callbacks-baseline.js                         232       35.86
promises-bluebird-generator.js                235       38.04
promises-bluebird.js                          335       52.08
promises-cujojs-when.js                       405       75.77
promises-tildeio-rsvp.js                      468       87.56
promises-dfilatov-vow.js                      578      125.98
callbacks-caolan-async-waterfall.js           634       88.64
promises-lvivski-davy.js                      653      109.64
promises-calvinmetcalf-lie.js                 732      165.41
promises-obvious-kew.js                      1346      261.69
promises-ecmascript6-native.js               1348      189.29
generators-tj-co.js                          1419      164.03
promises-then-promise.js                     1571      294.45
promises-medikoo-deferred.js                 2091      262.18
observables-Reactive-Extensions-RxJS.js      3201      356.76
observables-caolan-highland.js               7429      616.78
promises-kriskowal-q.js                      9952      694.23
observables-baconjs-bacon.js.js             25805      885.55

Platform info:
Windows_NT 6.1.7601 x64
Node.JS 1.1.0
V8 4.1.0.14
Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz × 4

2. IE Polyfill code -

import Bluebird from 'bluebird';
// Node
global.Promise = Bluebird;
// Browser
window.Promise = Bluebird;
like image 29
hazardous Avatar answered Oct 14 '22 22:10

hazardous