一次讲清楚 `Promise.finally()`:为什么“无论成功失败都要执行”该用它

在日常业务里,经常有这种需求:

  • 先做一件异步事(请求、弹窗、授权等);
  • 不管结果成功还是失败,后续流程都要继续。

这段代码就是一个典型例子:

js 复制代码
this.requestSomeSubscribeMessage().finally(() => {
    this.getSomeData(item.status);
});

1. 这段代码到底是什么语法?

这是 Promise 链式调用:

  1. this.requestSomeSubscribeMessage() 返回一个 Promise;
  2. .finally(...) 注册一个"收尾回调";
  3. 当前面 Promise 结束(fulfilled 或 rejected)时,finally 里的代码都会执行。

一句话:finally = 不管成败都执行。


2. 和 then / catch 的区别

最核心区别:

  • then:只处理成功
  • catch:只处理失败
  • finally:成功失败都执行(常用于收尾)

示例:

js 复制代码
doSomething()
  .then((res) => {
  console.log('成功', res);
})

.catch((err) => {
  console.log('失败', err);
})

.finally(() => {
  console.log('一定会执行');
});

3. 为什么订阅消息这个场景特别适合 finally

你的业务要求是:

  • 先调起订阅弹窗;
  • 用户允许、拒绝、关闭、报错都不阻断;
  • 始终继续办理保险流程。

这正是 finally 的语义:把"不应被阻断的后续逻辑"放进统一出口。

4. 你这段代码可以怎么理解(按执行顺序)

js 复制代码
this.requestSomeSubscribeMessage().finally(() => {
  this.getSomeData(item.Status);
});

执行过程:

  1. 调用 requestSomeSubscribeMessage(异步);
  2. 等它结束;
  3. 不管结束状态是什么,都调用 getSomeData(...)

5. 一个容易混淆的点:finally 不是拿结果用的

finally 适合做"收尾动作",比如:

  • 关闭 loading
  • 释放锁
  • 继续不应中断的流程
  • 埋点/日志(不依赖业务结果时)

如果你要依赖成功结果(如 res.data),应该在 then 里处理。

6. async/await 的等价写法(推荐复习)

你这段逻辑也可以写成:

js 复制代码
try {
  await this.requestSomeSubscribeMessage();
} finally {
  this.getSomeData(item.tianCaiInsuranceStatus);
}

这和 Promise 的 finally 语义一致:
try 成功或抛错,finally 都执行。

7. 实战建议(可直接记忆)

  • 看语义选方法:

    • 只成功:then
    • 只失败:catch
    • 都要执行:finally
  • 把"必须执行"的业务放 finally,最不容易漏逻辑。

  • 不要在 finally 里写依赖成功结果的代码(会让代码可读性变差)。

8. 这个案例的一句话总结

this.requestSomeSubscribeMessage().finally(...) 的含义就是:

"订阅流程结束后(不论结果),都继续办理保险。"

相关推荐
Momo__2 小时前
被低估的 HTML 原生表单元素:dialog、datalist、meter、progress
前端
莹宝思密达2 小时前
【AI】chrome-dev-tools-mcp
前端·ai
用户69371750013842 小时前
2026 Android 开发,现在还能入行吗?
android·前端·ai编程
SuperEugene2 小时前
Vue3 配置驱动弹窗:JSON配置弹窗内容/按钮,避免重复开发弹窗|配置驱动开发实战篇
前端·javascript·vue.js·前端框架·json
WayneYang2 小时前
前端 JavaScript 核心知识点 + 高频踩坑 + 大厂面试题全汇总(开发 / 面试必备)
前端·javascript
小贵子的博客2 小时前
基于Vue3 和 Ant Design Vue实现Modal弹窗拖拽组件
前端·javascript·vue.js
小李子呢02112 小时前
前端八股CSS---CSS选择器和优先级
前端·css
阿凤212 小时前
uniapp如何修改下载文件位置
开发语言·前端·javascript
小李子呢02112 小时前
前端八股---MVVM
前端·javascript·vue.js