随着前端技术的飞速发展，JavaScript 作为前端开发的一大核心，也在不断地升级和更新，不断推出新的功能和方法，以便更好地满足开发者的需求。其中，ES8 新增的 Promise.prototype.finally() 方法，是非常值得前端开发者了解和掌握的一个异步操作方法，本文将对此进行详细讲解，以期对读者有很好的学习和指导意义。
什么是 Promise？
Promise 是 JavaScript 中一种处理异步操作的方式，它可以让我们处理异步操作更加轻松、直观和优雅。当我们需要处理的操作在完成之前无法确定哪一个先执行，就需要使用 Promise 这种异步操作方式，以保证代码执行的正确性和可读性。
Promise.prototype.finally() 方法的作用
在 JavaScript 中，Promise 的执行过程中，通常都有以下三种情况：
- Promise 调用了 then() 方法，表示 Promise 执行成功了；
- Promise 调用了 catch() 方法，表示 Promise 执行失败了；
- Promise 没有调用 then() 或 catch() 方法，表示 Promise 执行未知的错误。
那么，Promise.prototype.finally() 方法的作用就是，无论 Promise 执行成功、失败或错误，都会执行 finally() 方法中的代码，而不管 Promise 的执行结果。
Promise.prototype.finally() 方法的基本语法
Promise.prototype.finally() 方法的基本语法如下：
promise.finally(() => {
// finally 方法中的代码
});其中，promise 表示 Promise 实例对象，后面的箭头函数里面的代码是 finally() 方法需要执行的代码。
Promise.prototype.finally() 方法的代码示例
下面，我们来看一下 Promise.prototype.finally() 方法的代码示例。
// Promise 示例函数
let promiseFunction = function (bool) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (bool) {
resolve("Promise 执行成功");
} else {
reject("Promise 执行失败");
}
}, 3000);
});
};
// finally() 方法示例
promiseFunction(true).then(result => {
console.log(result);
}).catch(error => {
console.log(error);
}).finally(() => {
console.log("Promise 执行结束");
});代码执行结果如下：
Promise 执行成功 Promise 执行结束
在上面的代码示例中，我们定义了一个 Promise 示例函数 promiseFunction，并调用该函数传入一个 boolean 类型参数，最后使用 promiseFunction.then()、promiseFunction.catch() 和 promiseFunction.finally() 方法对 Promise 实例进行处理，最终执行的结果是：Promise 执行成功，并输出“Promise 执行结束”。
如果我们将 promiseFunction() 函数调用时传入的 bool 参数设置为 false，即执行失败的情况，那么执行的结果将是：
Promise 执行失败 Promise 执行结束
在这种情况下，虽然 Promise 执行失败，但是仍然会执行 finally() 方法中的代码，即输出“Promise 执行结束”。
Promise.prototype.finally() 方法的实际应用场景
Promise.prototype.finally() 方法可以用于在 Promise 执行结束后进行一些清理操作，比如清除定时器、关闭网络连接、释放内存等。另外还可以用来显示某些特定的操作信息，或者是返回一些最终的数据等。
总结
通过本文的详细讲解，我们对 ES8 新增功能之一的 Promise.prototype.finally() 方法有了很深入的了解，知道了它的作用、语法和实际应用场景，并且通过代码示例更好地理解和掌握了该方法的使用方法。希望读者能够学以致用，并在实际开发中灵活地运用 Promise.prototype.finally() 方法，使代码更加清晰、简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65acf329add4f0e0ff6849a8