【问题标题】:Adding promise polyfill to ES6向 ES6 添加 Promise polyfill
【发布时间】: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); })

标签: javascript reactjs promise ecmascript-6


【解决方案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 - 我认为这句话更适合评论。
    猜你喜欢
    • 2016-08-04
    • 1970-01-01
    • 1970-01-01
    • 2017-07-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多