当前位置：首页 > 文章列表 > 文章 > 前端 > 基于 Promise.withResolvers 实现可干预的异步状态机

基于 Promise.withResolvers 实现可干预的异步状态机

2026-05-13 10:45:35 0浏览收藏

本文深入探讨了如何利用原生 `Promise.withResolvers` 构建灵活、可控的异步状态机——它不是用来干预已有 Promise 的“补丁”，而是从源头设计可被业务逻辑精准驱动的状态跃迁流程：每个状态独立持有可外部决议的 Promise，通过 `resolve`/`reject` 主动推进、取消、超时或分支跳转，彻底摆脱回调嵌套与链式断裂困境；配合结构化指令（如 `{ next: "retry", delay: 1000 }`），轻松实现多路径决策，让复杂异步流程变得语义清晰、调试友好、健壮可维护。

如何基于 Promise.withResolvers 实现一个支持外部干预的异步工作流状态机

Promise.withResolvers 不是用来“干预已存在 Promise”的工具，而是用来**提前创建一个可被外部逻辑决议的 Promise 实例**。它天然适合构建状态机：每个状态转移可对应一次 resolve 或 reject，且触发时机完全由业务逻辑控制，不依赖异步回调嵌套。

状态机设计核心思路

把整个工作流抽象为一组**预定义状态 + 可控跃迁条件**。每个状态节点返回一个 Promise（由 withResolvers 创建），后续状态通过调用其 resolve/reject 主动推进，而非等待固定异步事件。

每个状态独立持有自己的 { promise, resolve, reject }，互不干扰
resolve 传入的是下一状态的标识或数据，reject 表示流程中断或错误终止
外部可随时调用 resolve("cancel") 或 reject(new AbortError()) 强制退出当前阶段
消费者只 await 最顶层的 promise，内部状态流转对上层透明

典型三态工作流示例：初始化 → 运行 → 完成/失败

以下是一个带手动取消、超时和错误注入能力的轮询状态机：

const createWorkflow = () => {
  // 阶段1：初始化（同步准备）
  const init = Promise.withResolvers();
  
  // 阶段2：运行中（可轮询、可中断）
  const run = Promise.withResolvers();
  
  // 阶段3：最终结果（只读出口）
  const done = Promise.withResolvers();

  // 初始化完成后，自动进入运行态
  init.promise.then(() => {
    // 模拟初始化成功，启动轮询逻辑
    let attempts = 0;
    const poll = async () => {
      if (attempts >= 3) return run.reject(new Error("init failed"));
      
      try {
        const res = await fetch("/api/ready");
        const data = await res.json();
        if (data.status === "ready") {
          run.resolve(data);
        } else {
          attempts++;
          setTimeout(poll, 500);
        }
      } catch (e) {
        run.reject(e);
      }
    };
    
    poll();
  }).catch(done.reject);

  // 运行态决议后，进入完成态
  run.promise.then(result => done.resolve({ status: "success", data: result }))
            .catch(err => done.resolve({ status: "error", error: err }));

  // 对外暴露可控接口
  return {
    promise: done.promise,
    start: () => init.resolve(),           // 启动工作流
    cancel: () => run.reject(new AbortError("canceled")),
    forceSuccess: (data) => run.resolve(data),
    timeout: (ms) => setTimeout(() => run.reject(new Error(`timeout ${ms}ms`)), ms)
  };
};

// 使用方式
const wf = createWorkflow();
wf.start();
wf.timeout(5000); // 5秒未就绪则失败

wf.promise.then(console.log); // { status: "success", data: ... }