技术文摘
promise 中 then 与 finally 的区别
在 JavaScript 的异步编程中,Promise 是一种强大的工具,其中 then 和 finally 方法是经常被使用的两个重要特性,但它们有着明显的区别。
then 方法用于指定当 Promise 状态成功(resolved)或失败(rejected)时要执行的回调函数。它接受两个参数,第一个参数是 Promise 成功时执行的回调函数,第二个参数是 Promise 失败时执行的回调函数。通过 then 方法,我们可以按照异步操作的结果进行相应的处理,并返回一个新的 Promise,从而实现链式调用,使异步代码的逻辑更加清晰和易于理解。
例如,如果我们有一个获取用户数据的异步操作,成功时我们可以对数据进行处理,失败时给出相应的错误提示。
finally 方法则不同,它无论 Promise 的最终状态是成功还是失败,都会被执行。它主要用于执行一些无论结果如何都需要进行的清理操作或最终的统一处理逻辑。比如,关闭一个加载指示器、释放一些资源等。
与 then 方法不同的是,finally 方法不接受任何参数,也不会改变原 Promise 的结果值。它的返回值是一个新的 Promise,这个新的 Promise 的结果值和原 Promise 的结果值是相同的。
下面通过一个示例来更直观地理解它们的区别。假设我们有一个异步函数 fetchData 来获取数据:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve('成功获取数据');
} else {
reject('获取数据失败');
}
}, 1000);
});
}
fetchData()
.then(data => {
console.log('成功:', data);
})
.catch(error => {
console.error('失败:', error);
})
.finally(() => {
console.log('无论成功失败,都会执行');
});
在上述示例中,then 处理了成功和失败的不同情况,而 finally 则在操作结束后始终执行。
then 侧重于根据 Promise 的结果进行不同的处理,而 finally 则用于确保某些必要的收尾工作得以执行,无论 Promise 的最终状态如何。理解并正确使用这两个方法,可以让我们更好地编写异步代码,提高代码的可读性和可维护性。
- 使用JavaScript实现点击展开与关闭
- Vue3插件里如何使用Provide和Inject
- Vue3 中 Proxy 为何一定要用 Reflect
- Vue3+Pinia+TypeScript 实现封装轮播图组件的方法
- Vue3项目从零搭建指南
- Vue3 中如何使用 Vue Router
- Vue3 实现 H5 表单验证组件的方法
- Vue3 与 Vite 环境下 Vuex 的使用方法
- Vue3 如何使用 watch 监听对象属性值
- Vue3 中 Proxy 与 Reflect 实现响应式的使用方法
- Vue3 插件使用方法
- Vue3有哪些可视化工具
- Vue3 中 pinia 状态管理工具的使用方法
- Vue学习资料大集合:文献、文档、博客、视频一应俱全
- Vue 中 axios 发送异步请求方法全解析