如何利用 Promise 简化状态管理

Promise天然适合表达一次性、不可逆的状态变化，其pending/fulfilled/rejected三种状态和链式特性可清晰组织异步流程；通过Promise.withResolvers解耦决议责任，结合UI框架实现声明式状态渲染。

Promise 本身不是状态管理库，但它天然适合表达和流转“一次性、不可逆”的状态变化——比如“请求中→成功”或“请求中→失败”。利用好它的三种状态（pending/fulfilled/rejected）和链式特性，就能在不引入额外框架的前提下，清晰组织异步流程的状态逻辑。

用 Promise 封装单次状态流转

很多场景本质是“等一个结果”，比如点击一次按钮后等待响应、监听一次事件、获取一次配置。这类操作只需决议一次，正好匹配 Promise 的语义：

• 创建时处于 pending 状态，天然代表“进行中”
• 调用 resolve(value) → 状态变为 fulfilled，携带结果
• 调用 reject(error) → 状态变为 rejected，携带错误
• 状态不可逆，避免重复触发或覆盖，减少竞态风险

例如封装 DOM 元素首次点击：

function waitForFirstClick(el) {  const { promise, resolve } = Promise.withResolvers();  const handler = () => {    el.removeEventListener('click', handler);    resolve('clicked');  };  el.addEventListener('click', handler);  return promise;}

调用方只关心 promise，无需手动维护 flag 或回调队列。

用 Promise 链控制状态顺序

当多个异步操作必须按序执行（如：先登录 → 再拉取用户信息 → 最后加载偏好设置），Promise 链天然提供线性状态流：

• 每个 .then() 接收上一环节的 fulfilled 结果，自然形成“成功路径”
• .catch() 捕获任意环节的 rejected，统一处理失败分支
• 链中任意环节返回新 Promise，即可嵌套更复杂的状态分支

避免手写状态机或全局变量标记“当前走到哪一步”，状态推进由执行时机自动保证。

用 Promise.withResolvers 解耦决议责任

传统 new Promise 需在构造时传入 executor，把 resolve/reject 锁死在内部作用域。而 Promise.withResolvers 返回 { promise, resolve, reject } 三元组，让“谁创建”和“谁决议”可以分离：

• 主函数返回 promise，专注定义“要等什么”
• 事件处理器、定时器回调、外部 API 响应等持有 resolve/reject，专注“何时满足条件”
• 配合 WeakMap 可按 ID 关联 resolver，避免内存泄漏

特别适合插件系统、跨模块通信、测试模拟等需要延迟决议的场景。

结合 UI 框架做声明式状态渲染

在 Vue、React 等框架中，Promise 实例可直接作为响应式数据源：

• Vue 中可用 v-if/v-else 区分 pending / fulfilled / rejected
• 借助 vue-prom 等组件，用插槽自动匹配不同状态下的 UI
• React 中可通过 useEffect + useState 跟踪 promise 状态，或使用 useAsync 自定义 Hook

把“加载中”“成功展示”“报错提示”这些 UI 状态，直接映射到 Promise 的内在状态，减少手动维护 loading/error/data 三个变量的样板代码。