如何在 Edge 中添加 polyfill 以支持 finally()？

Question

我正在使用 axios 库并使用 then()、catch() 和 finally()。在 Chrome 中完美运行。但是 finally() 方法在 MS Edge 中不起作用。我使用 polyfills 或 shims 进行了研究，但我迷路了。我没有使用 webpack 或转译，也不打算添加它们。我需要保持简单。如何添加 polyfill 以确保 finally() 在 Edge 中工作？谢谢！

Answer 1

除了下面详述的行为之外，这应该处理 thenable 的 species 的传播：

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

此实现基于 finally() 的记录行为，并取决于 then() 是否符合规范：

• finally 回调不会收到任何参数，因为没有可靠的方法来确定承诺是否被履行或拒绝。此用例正好适用于您不关心拒绝原因或履行价值的情况，因此无需提供。

• 与Promise.resolve(2).then(() => {}, () => {})（将使用undefined 解析）不同，Promise.resolve(2).finally(() => {}) 将使用2 解析。

• 同样，与Promise.reject(3).then(() => {}, () => {})（将使用undefined 实现）不同，Promise.reject(3).finally(() => {}) 将被3 拒绝。

注意：finally 回调中的throw（或返回被拒绝的承诺）将拒绝新的承诺，并在调用throw() 时指定拒绝原因。

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

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 = callback => Promise.resolve(fn()).then(callback);
    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 对此答案的意见。如果您觉得这篇文章有帮助，请查看his implementation 并点赞。