面试问题：“ES9 中的 Promise.prototype.finally()”-JavaScript中文网-JavaScript教程资源分享门户

在 ES9 中，Promise 的原型对象上新增了一个方法：Promise.prototype.finally()，该方法的作用是在 Promise 对象结束时，无论是 resolve 还是 reject，都会执行一次指定的回调函数，类似于 JavaScript 中的 try-catch-finally 结构的 finally 块。本文将详细介绍 Promise.prototype.finally() 的用法、语法、实现方式以及常见使用场景，希望能对前端开发者有所帮助。

用法和语法

Promise.prototype.finally() 方法的语法格式如下：

promise.finally(onFinally)

其中：

promise 表示一个 Promise 对象，该对象的状态或值在执行回调之前不会改变；
onFinally 表示当 Promise 对象结束时执行的回调函数，该函数并不接收任何参数，且它的返回值会被忽略。该函数在 Promise 对象解决或拒绝后都会执行一次，即使 Promise 对象被取消也一样。

该方法既可以链式调用 Promise 对象，也可以用于 Promise.prototype.then() 和 Promise.prototype.catch() 的后面，例如：

// www.javascriptcn.com code example
promise
    .then(() => {
        // 成功状态
    })
    .catch(() => {
        // 失败状态
    })
    .finally(() => {
        // 无论如何都会执行的代码
    })

实现方式

Promise.prototype.finally() 方法的本质是一个语法糖，实际上是在 Promise.prototype.then() 和 Promise.prototype.catch() 后面接着一个 Promise 对象，该 Promise 对象只执行回调函数，不改变状态或值。具体实现方式如下：

// www.javascriptcn.com code example
Promise.prototype.finally = function (onFinally) {
    // 判断参数是否为函数
    if (typeof onFinally !== "function") {
        return this;
    }

    // 链式调用 then 方法，并返回一个新的 Promise 对象
    const P = this.constructor;
    return this.then(value =>
            P.resolve(onFinally()).then(() => value)
        )
        .catch(error =>
            P.resolve(onFinally()).then(() => {
                throw error;
            })
        );
};

常见使用场景

Promise.prototype.finally() 方法的常见使用场景如下：

清理工作

在 Promise 对象结束时执行清理工作，例如关闭文件、数据库连接、释放内存等。

// www.javascriptcn.com code example
promise
    .then(value => {
        // 成功状态
    })
    .catch(reason => {
        // 失败状态
    })
    .finally(() => {
        // 执行清理工作
    });

加载状态

在 Promise 对象结束时移除加载状态。

// www.javascriptcn.com code example
showLoader();

fetchData().then(data => {
    // 成功状态
}).catch(error => {
    // 失败状态
}).finally(() => {
    hideLoader();
});

记录日志

在 Promise 对象结束时记录日志信息。

// www.javascriptcn.com code example
promise
    .then(value => {
        // 成功状态
    })
    .catch(reason => {
        // 失败状态
    })
    .finally(() => {
        console.log("Promise ended");
    });

深入学习和指导意义

Promise.prototype.finally() 方法的出现，解决了我们在开发过程中常常遇到的一些问题，例如无论 Promise 对象的状态如何，都需要执行某些代码、需要为每个 then() 或 catch() 追加相同的代码等等。它不仅方便了我们的开发工作，同时也增加了代码的可读性和维护性。

在深入学习 Promise 的过程中，我们需要掌握 Promise 的基本用法、原理和实现方式，以及常见的使用场景和问题解决方法。通过不断实践和探索，我们可以更好地运用 Promise 技术来解决前端开发中的各种问题，提高我们的编程能力和开发效率。

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

面试问题：“ES9 中的 Promise.prototype.finally()”