带忙碌指示、可中止及进度日志的async函数实现惯用法咨询

针对你提到的三个核心需求，社区里有一套成熟的通用实现模式，结合async/await、AbortController和GUI状态封装就能搞定，下面分点拆解：

1. GUI忙碌状态管理 #

用try/finally块保证忙碌状态的开启与恢复，无论任务成功、失败还是被中止，都能重置GUI状态，这是异步任务中处理资源清理的标准惯用法。

async function runLongTask(taskController) {
  try {
    // 开启忙碌状态：设置等待光标、显示加载动画
    enableBusyState(true);
    // 执行你的异步步骤
    await stepOne(taskController);
    await stepTwo(taskController);
  } catch (err) {
    // 统一处理错误（包括中止信号）
    console.error("任务异常:", err);
    showUserError(err.message);
  } finally {
    // 强制恢复GUI状态
    enableBusyState(false);
  }
}

// 封装GUI忙碌状态的切换逻辑
function enableBusyState(isBusy) {
  window.setCursor(isBusy ? "wait" : "default");
  document.getElementById("task-spinner").style.display = isBusy ? "block" : "none";
}

2. 用户中止请求处理 #

使用标准的AbortController传递中止信号，这是浏览器/Thunderbird环境中处理异步任务中止的通用方案，无需自己维护中止标记：

// 为每个任务创建独立的控制器（或全局复用，根据需求调整）
const taskController = new AbortController();

// 绑定中止按钮事件
document.getElementById("abort-btn").addEventListener("click", () => {
  taskController.abort("用户手动中止任务");
});

async function stepOne(controller) {
  // 先检查是否已被中止
  if (controller.signal.aborted) {
    throw new Error(controller.signal.reason);
  }

  // 自定义异步逻辑中监听中止信号
  await new Promise((resolve, reject) => {
    const timer = setTimeout(() => resolve("步骤1完成"), 1500);
    // 中止时清理资源并抛出错误
    controller.signal.addEventListener("abort", () => {
      clearTimeout(timer);
      reject(new Error(controller.signal.reason));
    });
  });
}

3. 定期状态报告 #

封装一个状态更新函数，在异步任务的关键节点调用；如果是循环类任务，可以在循环中定期更新，同时顺便检查中止信号：

// 封装状态栏更新逻辑
function updateStatus(text) {
  document.getElementById("status-bar").textContent = text;
}

async function stepTwo(controller) {
  updateStatus("开始执行步骤2...");
  const total = 50;
  for (let i = 0; i < total; i++) {
    // 每次循环先检查中止
    if (controller.signal.aborted) {
      throw new Error(controller.signal.reason);
    }
    // 处理单个任务项
    await processItem(i);
    // 每5次循环更新一次状态
    if (i % 5 === 0) {
      updateStatus(`步骤2：已完成 ${i}/${total} 项`);
    }
  }
  updateStatus("步骤2执行完毕");
}

整合式通用任务管理器 #

把上述逻辑封装成一个可复用的TaskManager类，避免重复代码，这是大型异步任务场景的常用实践：

class TaskManager {
  constructor() {
    this.resetController();
  }

  resetController() {
    this.controller = new AbortController();
  }

  setBusy(isBusy) {
    window.setCursor(isBusy ? "wait" : "default");
    document.getElementById("task-spinner").style.display = isBusy ? "block" : "none";
  }

  updateStatus(message) {
    document.getElementById("status-bar").textContent = message;
  }

  abort(reason = "任务已中止") {
    this.controller.abort(reason);
  }

  async run(taskFunction) {
    try {
      this.setBusy(true);
      // 把管理器实例传给任务函数，方便调用状态更新和获取中止信号
      await taskFunction(this);
      this.updateStatus("任务执行完成");
    } catch (err) {
      if (err.name === "AbortError" || err.message.includes("中止")) {
        this.updateStatus(`任务中止：${err.message}`);
      } else {
        this.updateStatus(`任务失败：${err.message}`);
        console.error(err);
      }
    } finally {
      this.setBusy(false);
      this.resetController(); // 重置控制器，方便下次启动任务
    }
  }
}

// 使用示例
const taskManager = new TaskManager();

// 绑定启动按钮
document.getElementById("start-btn").addEventListener("click", () => {
  taskManager.run(async (manager) => {
    manager.updateStatus("任务启动中...");
    await stepOne(manager.controller);
    manager.updateStatus("步骤1完成，进入步骤2");
    await stepTwo(manager.controller);
  });
});

// 绑定中止按钮
document.getElementById("abort-btn").addEventListener("click", () => {
  taskManager.abort("用户手动中止");
});

内容的提问来源于stack exchange，提问作者einpoklum