在 JavaScript 中，Promise 是一种非常常见的异步编程方式。Promise 在异步编程中解决了回调地狱的问题，使得异步代码的可读性得到了极大的提升。
但是，我们在使用 Promise 的过程中，有时候需要在 Promise 结束后做一些清理工作，比如关闭数据库连接、清除缓存等等。这时候，就需要用到 Promise.finally() 方法。
Promise.finally() 方法简介
Promise.finally() 方法是 ES2018 标准中新增的方法，它接收一个回调函数作为参数。无论 Promise 是成功还是失败，finally() 方法都会被执行。
finally() 方法返回一个新的 Promise 对象，它的状态和值与原来的 Promise 对象保持一致。如果 finally() 方法中的回调函数返回了一个 Promise 对象，那么这个 Promise 对象的状态和值会影响最终返回的 Promise 对象。
Promise.finally() 方法的实际应用
下面，我们来看一些 Promise.finally() 方法的实际应用场景。
1. 清理工作
在使用 Promise 进行异步编程的过程中，我们经常需要进行一些清理工作，比如关闭数据库连接、清除缓存等等。Promise.finally() 方法可以帮助我们在 Promise 结束后进行这些清理工作。
function fetchData() {
return fetch('https://example.com/data')
.then(response => response.json())
.finally(() => {
// 清理工作
console.log('清理工作完成');
});
}2. 关闭服务器
在使用 Node.js 进行服务器编程的过程中，我们经常需要在服务器关闭时进行一些清理工作，比如关闭数据库连接、清除缓存等等。Promise.finally() 方法可以帮助我们在服务器关闭时进行这些清理工作。
// javascriptcn.com 代码示例
const server = http.createServer(app);
const port = process.env.PORT || 3000;
server.listen(port, () => {
console.log(`服务器已启动，监听端口 ${port}`);
});
process.on('SIGTERM', () => {
server.close(() => {
console.log('服务器已关闭');
});
});
server.on('close', () => {
// 清理工作
console.log('清理工作完成');
});3. 显示加载动画
在使用 Promise 进行异步编程的过程中，我们经常需要显示加载动画，以提高用户体验。Promise.finally() 方法可以帮助我们在 Promise 结束后隐藏加载动画。
// javascriptcn.com 代码示例
function fetchData() {
showLoading();
return fetch('https://example.com/data')
.then(response => response.json())
.finally(() => {
hideLoading();
});
}Promise.finally() 方法的注意事项
虽然 Promise.finally() 方法非常实用，但是在使用的过程中需要注意以下几点。
1. finally() 方法不接收参数
finally() 方法不接收任何参数，它只是一个回调函数。如果需要向 finally() 方法传递参数，可以使用闭包的方式。
// javascriptcn.com 代码示例
function fetchData() {
const startTime = new Date().getTime();
return fetch('https://example.com/data')
.then(response => response.json())
.finally(() => {
const endTime = new Date().getTime();
const elapsedTime = endTime - startTime;
console.log(`请求耗时：${elapsedTime}ms`);
});
}2. finally() 方法返回的 Promise 对象的状态和值与原来的 Promise 对象保持一致
finally() 方法返回的 Promise 对象的状态和值与原来的 Promise 对象保持一致。如果 finally() 方法中的回调函数返回了一个 Promise 对象，那么这个 Promise 对象的状态和值会影响最终返回的 Promise 对象。
// javascriptcn.com 代码示例
function fetchData() {
return fetch('https://example.com/data')
.then(response => response.json())
.finally(() => {
return new Promise((resolve, reject) => {
// 这里返回一个 rejected 的 Promise 对象
reject(new Error('清理工作失败'));
});
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error)); // 输出：Error: 清理工作失败3. finally() 方法不改变原来的 Promise 对象
finally() 方法返回一个新的 Promise 对象，它的状态和值与原来的 Promise 对象保持一致。finally() 方法并不会改变原来的 Promise 对象。
const promise = Promise.resolve('hello');
promise.finally(() => {
console.log('finally');
});
promise.then(data => console.log(data)); // 输出：hello总结
Promise.finally() 方法是一种非常实用的异步编程方式，它可以帮助我们在 Promise 结束后进行一些清理工作，提高代码的可读性和可维护性。
在使用 Promise.finally() 方法时，需要注意 finally() 方法不接收参数、finally() 方法返回的 Promise 对象的状态和值与原来的 Promise 对象保持一致、finally() 方法不改变原来的 Promise 对象等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6577bee9d2f5e1655d16ccb8