Angular 1.6+Gulp+ES6 Promise的finally方法IE11/Edge报错求助

嘿，这个坑我之前踩过！IE 11和非Chromium内核的旧版Edge确实不支持ES6原生Promise的finally()方法——这俩浏览器的原生Promise实现里没包含这个API，哪怕你用了Angular 1.6，要是混用了原生Promise和Angular的$q，照样会触发这个TypeError。给你几个实用的解决办法：

方法1：添加Promise finally()的Polyfill #

这是最省心的方案，不用改业务代码，直接给原生Promise补上finally方法。在你的项目入口文件（比如app.js，或者index.html里的前置脚本）加入这段代码：

if (!Promise.prototype.finally) {
  Promise.prototype.finally = function(callback) {
    const Constructor = this.constructor;
    return this.then(
      value  => Constructor.resolve(callback()).then(() => value),
      reason => Constructor.resolve(callback()).then(() => { throw reason; })
    );
  };
}

这段代码会先检测浏览器是否支持finally，如果不支持就手动实现一个，完全符合ES标准的行为，不管你用原生Promise还是基于它的第三方Promise库都能生效。

方法2：统一使用Angular 1.6的$q Promise #

Angular 1.6的$q本身就实现了.finally()方法，而且在IE 11/旧Edge里能正常运行。如果你的项目里混用了原生Promise和$q，可以做这两个调整：

• 把所有new Promise(...)的写法换成$q((resolve, reject) => { ... })
• 如果是第三方库返回的原生Promise，用$q.wrap()把它转换成$q实例，比如：

  const thirdPartyPromise = someLibrary.getData();
  $q.wrap(thirdPartyPromise)
    .then(result => { /* 处理逻辑 */ })
    .finally(() => { /* 清理操作 */ });
  

方法3：用then的双回调替代finally #

如果暂时不想加polyfill或者换$q，可以把finally里的逻辑提取成独立函数，分别放到then的成功回调和catch的失败回调里：

// 提取清理逻辑到单独函数
const cleanup = () => {
  // 这里写你原来finally里的代码，比如隐藏加载动画、重置状态等
};

myPromise
  .then(result => {
    // 处理成功逻辑
    cleanup();
  })
  .catch(error => {
    // 处理错误逻辑
    cleanup();
  });

不过这个方法有个缺点：如果cleanup是异步操作，处理起来会比较麻烦，而且代码有重复，所以只建议临时救急用。

内容的提问来源于stack exchange，提问作者Mr. Raj Kale