web-dev-qa-db-fra.com

Ajout de Polyfill Promis à ES6

J'ai un projet React écrit en ES6. Il est compilé avec Babel et fonctionne assez bien. À l'exception d'une promesse (parmi beaucoup d'autres) qui n'agit que dans IE, pour laquelle je sais déjà, n'a aucun soutien pour les promesses. Alors j'ai tout de suite pensé à ajouter un polyfill pour fournir des promesses pour IE, mais je me suis dit "Tenez bon, vous écrivez déjà ES6 et n'est-ce pas compilé dans ES5? Qui saurait mieux que SO?
Y a-t-il alors un sens à ajouter un polyfill tel que es6-promise à mon projet? Et s'il y en a une, comment devrais-je l'utiliser syntaxiquement? Pour l'instant, je n'ai que l'importation, mais je devrais probablement aussi l'implémenter?

import Promise from 'es6-promise';

Voici également la promesse qui cause des problèmes dans IE, peut-être que j'ai une erreur de syntaxe que je n'ai pas constatée moi-même! :)

new SingleObjectResource(DJ_CONST.API.setLanguage)
    .put(null, {language_code: theLanguage})
    .then(
        function() {
            window.location.reload();
        }
    );
javascriptreactjspromiseecmascript-6
14
makaveli

J'avais la même situation et j'étais très frustré car je devais déployer une application de production. Le problème que j'avais était avec Promises de fetchjs. C'est ce que je fais pour sauver ma vie

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

puis dans mon fichier principal JS, juste appelé cela 

   import "es6-promise/auto";

à partir d'ici https://github.com/stefanpenner/es6-promise#auto-polyfill

fondamentalement, sa syntaxe alternative de 

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

Fondamentalement, sous le capot La méthode polyfill () appliquera un correctif sur l'environnement global (dans ce cas au nom de la promesse) lors de l'appel.

Note: J'utilisais gulp avec browserify. 

11
Danish

Bien que vous utilisiez Babel (uniquement pour le traspiling et non pour l’ajout de fonctionnalités), des polyfill sont nécessaires. 

Tout ce que vous avez à faire est d'installer le paquet: 

npm install --save es6-promise

Dans webpack.config.js (ou où que soient vos configurations de pack Web, en supposant que vous utilisez WebPack) 

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

La méthode polyfill () corrigera l'environnement global (dans ce cas, avec le nom de la promesse) lorsqu'elle sera appelée. Plus d'infos sur https://github.com/stefanpenner/es6-promise

1
tomericco

Je ne pouvais pas modifier ma réponse précédente plus tôt car j'avais reçu le commentaire dans la nuit lorsque j'étais hors ligne ... en affichant à nouveau ma réponse avec des informations intégrées par rapport aux commentaires reçus. Merci.

Pourquoi ne pas utiliser bluebird partout? Son plus rapide que les promesses indigènes . Et polyfills pour IE aussi. Et je ne travaille pas pour eux :).

MODIFIER:

Utiliser bluebird au lieu de la promesse autochtone -

const Promise = require('bluebird');

1. Ajout de comparaisons de performances -

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 code Polyfill - 

import Bluebird from 'bluebird';
// Node
global.Promise = Bluebird;
// Browser
window.Promise = Bluebird;
1
hazardous