向 ES6 添加 Promise polyfill

Posted 2023-02-22

【中文标题】向 ES6 添加 Promise polyfill

【英文标题】：Adding promise polyfill to ES6

【发布时间】：2016-03-22 07:15:49

【问题描述】：

我有一个用 ES6 编写的 React 项目。它使用 Babel 编译，运行良好。除了一个只在 IE 中起作用的承诺（很多！），我已经知道 - 不支持承诺。所以我立刻想到添加一个 polyfill 来为 IE 提供 Promise，但后来我就像“等等，你已经在编写 ES6 并且不是编译到 ES5 中了吗？”谁会比 SO 更了解？ 那么在我的项目中添加诸如es6-promise之类的polyfill有什么意义吗？如果有，我应该如何在语法上使用它？现在我只有导入，但我可能也应该以某种方式实现它？

import Promise from 'es6-promise';

这也是在 IE 中导致问题的承诺，也许我有一个我自己没有注意到的语法错误！ :)

new SingleObjectResource(DJ_CONST.API.setLanguage)
    .put(null, language_code: theLanguage)
    .then(
        function() 
            window.location.reload();
        
    );

【问题讨论】：

Babel 只将语言特性转换为 ES5。你仍然需要polyfills :) 把它放在你的页面顶部，不用担心importing 任何东西，只要像原生可用一样编写 ES6

es6-promise 是一个缓慢且相当过时的 polyfill afaik。

RGraham，我会一有机会就尝试一下，但您似乎已经设法用两句话抓住了我期望的答案。谢谢！

为什么不到处使用bluebird？它的faster than the native promises。还有polyfills for IE。而且我不为他们工作:)。

SingleObjectResource 是您制作的，还是第三方库？您是否在控制台中遇到某种错误？如果没有，请尝试在您的.then() 之后添加.catch(function (error) console.log(error); )。

【参考方案1】：

我遇到了同样的情况并且非常沮丧，因为我不得不部署生产应用程序，我遇到的问题是来自 fetchjs 的 Promises。这就是我为挽救生命所做的事情

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

然后在我的主 JS 文件中，刚刚调用了这个

   import "es6-promise/auto";

从这里https://github.com/stefanpenner/es6-promise#auto-polyfill

基本上，它的替代语法

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

基本上，polyfill() 方法会在调用时修补全局环境（在本例中为 Promise 名称）。

注意：我使用的是带有 browserify 的 gulp。

【参考方案2】：

虽然您使用的是 Babel（只是 traspiling 而不是添加功能），但仍需要 polyfill。

你所要做的就是安装包：

npm install --save es6-promise

在webpack.config.js 内部（或者你的 webpack 配置的任何地方，假设你正在使用 webpack）

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

polyfill() 方法将在调用时修补全局环境（在本例中为 Promise 名称）。更多信息https://github.com/stefanpenner/es6-promise

【讨论】：

“require('es6-promise').polyfill();”怎么写作为 es6 导入语句？

您可以尝试使用import 表示法。我也有一个 ES6 项目，但是我还是把这行写成 ES5。

【参考方案3】：

我无法更早地编辑我之前的回复，因为我在离线时的晚上收到了评论...根据评论反馈重新发布我的回复，其中包含嵌入的信息。谢谢。

为什么不到处使用bluebird？它的faster than the native promises。还有polyfills for IE。而且我不为他们工作:)。

编辑：

使用 bluebird 代替原生 promise -

const Promise = require('bluebird');

1. 增加性能对比-

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 代码 -

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

【讨论】：

这个 still 没有回答这个问题，你正在用“使用 jQuery”回答“我如何选择一个元素”。性能基准与手头的问题完全无关。

您的比较是可以理解的，但我不同意我的评论与手头的主题无关。 OP 已经在带有 Promise 的 IE 上提出了一个可能的跨浏览器问题，并且还在评估使用另一种被证明比 bluebird 慢的 polyfill。我提到的替代方案不仅比本地更快，而且还支持 IE。与您的示例类似的参数是...使用 jQuery 而不是说 querySelector 因为后者尚未被所有浏览器支持。

性能问题与这个问题无关，浏览器兼容性问题才是。

这似乎是相关的，正如 Benjamin 提到的，es6 polyfill 很慢，这是一个重要因素。 OP 已明确要求提供有关使用它的建议。无论如何，我会让 OP 决定。

速度肯定是一个有效的观点，但是如果我成功使用 babel，我更喜欢不包含另一个库的解决方案（因为我已经在运行 babel）。当然，如果我按照我一开始的计划运行es6-promise，那么您的帖子将具有更大的相关性，因为es6-promise 也是一个单独的库。但是您最初的帖子肯定没有提供如何准确实施 bluebird，它只是指出它将很好地替代 es6-promise - 我认为这句话更适合评论。