Promise.prototype.finally() 的兼容性问题及解决方式

介绍

Promise 对象是异步编程中非常常见的对象，为了方便管理异步操作的状态，Promise 从 ES6 一出现就受到了广泛的追捧和使用。随着时间的推移，Promise 相关的 API 也不断完善和更新。 finally() 是其中一个比较实用的 API，但是它还有一些兼容性问题，需要注意。

finally() 的定义

Promise.prototype.finally() 函数返回一个 Promise，在 Promise 结束时，无论结果是 fulfilled 或者 rejected，都会执行指定的回调函数。这提供了一个中止一个 Promise 链的方法，与 .then() 或 .catch() 具有可比拟的实用性。。

兼容性问题

finally() 是在 ES8/ES2017 里添加到 Promise 原型上的，所以只有现代浏览器和 Node.js，比如 Chrome, Firefox, Safari, Edge, Node.js 10 及以上版本才支持这个 API。如果使用 finally() 的话，需要注意这个函数在 IE11 和 iOS 11 下面是不支持的。

解决方式

针对这个兼容性问题，我们可以自己实现一个 finally() 函数，使其兼容所有的浏览器。下面是实现的代码示例。

Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        value => P.resolve(callback()).then(() => value),
        reason => P.resolve(callback()).then(() => { throw reason })
    );
};

这个是较为完整的 finally() 实现，它能够在所有浏览器中工作正常。finally() 的回调函数不带任何参数，它仅用于表示当 Promise 被解决之后，无论 Promise 的结果是什么，都要执行一次。这个函数返回一个 Promise，它的值是原 Promise 的值。

下面是一个使用 finally() 实现的 Promise 链式操作的示例代码：

// javascriptcn.com code example
function promiseFunction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Hello, Promise!");
        }, 1000);
    });
}

promiseFunction()
    .then(result => {
        console.log(result);
        return "Hello, World!";
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        console.log("finally finished!");
    });

在这个示例中，finally() 执行完 promiseFunction() 后，即可输出"finally finished!"。

结论

finally() 是 Promise 的一个非常实用的函数，但因为兼容性的问题不能被所有浏览器支持。但是通过自己实现的方式，我们可以让它在所有浏览器上都能够正常使用。对于前端开发人员，掌握 Promise 的相关 API 是十分必要的，能够提高开发效率，更好的管理异步操作。同时需要注意浏览器的兼容性问题，编写兼容性代码有助于提高代码的灵活性和可复用性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673483850bc820c582499473