一次讲清楚 `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(...) 的含义就是:

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

相关推荐
谙忆102441 分钟前
前端图片直传对象存储:OSS/S3 预签名 URL、STS 临时凭证与回调校验
前端
CHNE_TAO_EMSM2 小时前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
一孤程3 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
IT_陈寒3 小时前
SpringBoot自动配置不是你以为的那样的智能
前端·人工智能·后端
yume_sibai4 小时前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
Hyyy4 小时前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫4 小时前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥4 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj5 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓5 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习