如何在Edge中添加polyfill以支持finally()? [英] How to add a polyfill to support finally() in Edge?

问题描述

我正在使用axios库，并使用then()，catch()和finally().在Chrome浏览器中完美运行.但是，finally()方法在MS Edge中不起作用.我使用填充胶或垫片进行了研究，但我迷路了.我不使用webpack或转堆，也不打算添加它们.我需要保持简单.如何添加polyfill以确保finally()在Edge中工作?谢谢！

I'm using axios library and using then(), catch() and finally(). Works perfectly in Chrome. However the finally() method does not work in MS Edge. I researched using polyfills or shims and I'm lost. I am not using webpack or transpiling and don't plan to add them. I need to keep this simple. How can I add a polyfill to make sure finally() works in Edge? Thanks!

推荐答案

这应处理可扩展对象的

This should handle the propagation of the thenable's species in addition to the behaviors detailed below:

Promise.prototype.finally = Promise.prototype.finally || {
  finally (fn) {
    const onFinally = value => Promise.resolve(fn()).then(() => value);
    return this.then(
      result => onFinally(result),
      reason => onFinally(Promise.reject(reason))
    );
  }
}.finally;

此实现基于

This implementation is based on the documented behavior of finally() and depends on then() being compliant to the specification:

• finally回调将不接收任何参数，因为没有可靠的方法来确定诺言是否已兑现.正是这种用例适用于您不关心拒绝原因或履行价值，因此不需要提供它的情况.

• A finally callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you do not care about the rejection reason, or the fulfillment value, and so there's no need to provide it.

与Promise.resolve(2).then(() => {}, () => {})(将由undefined解析)不同，Promise.resolve(2).finally(() => {})将由2解析.

Unlike Promise.resolve(2).then(() => {}, () => {}) (which will be resolved with undefined), Promise.resolve(2).finally(() => {}) will be resolved with 2.

类似，与Promise.reject(3).then(() => {}, () => {})(将由undefined满足)不同，Promise.reject(3).finally(() => {})将被3拒绝.

Similarly, unlike Promise.reject(3).then(() => {}, () => {}) (which will be fulfilled with undefined), Promise.reject(3).finally(() => {}) will be rejected with 3.

注意::finally回调中的throw(或返回被拒绝的承诺)将以调用throw()时指定的拒绝原因来拒绝新的承诺.

Note: A throw (or returning a rejected promise) in the finally callback will reject the new promise with the rejection reason specified when calling throw().

当然还有等效行为的演示:

And of course a demonstration of equivalent behavior:

const logger = (label, start = Date.now()) => (...values) => {
  console.log(label, ...values, `after ${Date.now() - start}ms`);
};

const delay = (value, ms) => new Promise(resolve => {
  setTimeout(resolve, ms, value);
});

// run test on native implementation
test('native');

// force Promise to use the polyfill implementation
Promise.prototype.finally = /* Promise.prototype.finally || */ {
  finally (fn) {
    const onFinally = value => Promise.resolve(fn()).then(() => value);
    return this.then(
      result => onFinally(result),
      reason => onFinally(Promise.reject(reason))
    );
  }
}.finally;

// run test on polyfill implementation
test('polyfill');

function test (impl) {
  const log = ordinal => state => logger(`${ordinal} ${impl} ${state}`);
  const first = log('first');

  // test propagation of resolved value
  delay(2, 1000)
    .finally(first('settled'))
    .then(first('fulfilled'), first('rejected'));

  const second = log('second');

  // test propagation of rejected value
  delay(Promise.reject(3), 2000)
    .finally(second('settled'))
    .then(second('fulfilled'), second('rejected'));

  const third = log('third');

  // test adoption of resolved promise
  delay(4, 3000)
    .finally(third('settled'))
    .finally(() => delay(6, 500))
    .then(third('fulfilled'), third('rejected'));

  const fourth = log('fourth');

  // test adoption of rejected promise
  delay(5, 4000)
    .finally(fourth('settled'))
    .finally(() => delay(Promise.reject(7), 500))
    .then(fourth('fulfilled'), fourth('rejected'));
}

.as-console-wrapper{max-height:100%!important}

感谢 @Bergi 在此答案上的投入.请参阅其实施方式，如果您认为这篇文章对您有帮助，也请对其进行投票.

Thanks to @Bergi for his input on this answer. Please see his implementation and upvote it as well if you found this post helpful.

这篇关于如何在Edge中添加polyfill以支持finally()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！