为异步任务添加进度更新钩子需分场景:小任务用带防错的回调函数;多监听者用 promise + eventemitter;需取消时结合 abortsignal;服务端长任务则依赖 jobid 轮询或 websocket。

为长时间运行的异步任务添加进度更新钩子,核心是让任务在执行过程中主动“吐出”当前状态,同时提供外部可监听、可响应的机制。这不是单纯加个 console.log,而是建立一种轻量、解耦、可组合的状态通信模式。
用回调函数作为最简钩子
适合单次任务、逻辑简单、不涉及并发或取消的场景。任务函数接收一个 onProgress 参数,在关键节点调用它并传入进度数据:
- 参数建议包含
percent(0–100 数值)、message(如“正在处理第 127 条记录”)、details(可选对象,比如已处理数、剩余时间估算) - 回调应设计为“防火”:加
typeof onProgress === 'function'判断,避免因未传参导致报错 - 示例:
await uploadFiles(files, { onProgress: (p) => console.log(`${p.percent}% — ${p.message}`) });
用 Promise + EventEmitter 或自定义事件总线
当任务需被多个组件监听(如 UI 进度条 + 日志面板 + 超时监控),回调易混乱。此时可返回一个带事件能力的对象:
WebSocket 8.18.2 是该协议规范的一个重要迭代版本,主要优化了连接稳定性与数据传输效率。它通过全双工通信机制,允许客户端与服务器在单一长连接上实时交换数据,大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力,适用于即时通讯、在线游戏及金融行情推送等低延迟场景,为开发者提供更可靠的实时网络交互基础。
- 返回一个
Promise同时暴露.on('progress', handler)方法,内部用EventEmitter或轻量事件类实现 - 任务执行中触发
'progress'事件,携带标准化 payload;完成时触发'done'或'error' - 调用方可多次监听,也可在中途调用
.off()解绑,避免内存泄漏
结合 AbortSignal 实现可中断 + 进度联动
现代浏览器和 Node.js 支持 AbortController,可自然地把取消与进度控制统一起来:
- 任务函数接受
{ signal, onProgress },在每次循环/批次前检查signal.aborted - 进度钩子可同步更新 UI 的“取消按钮”状态(例如进度达 80% 后禁用取消)
- 取消时触发
onProgress({ percent: 0, message: '已取消', status: 'cancelled' }),保持状态可见性
服务端任务:用唯一 ID + 状态轮询或 WebSocket 推送
若任务在服务端长时间运行(如视频转码、批量导出),前端无法直连执行上下文:
- 启动任务时返回唯一
jobId,后端将进度存入 Redis 或数据库,并提供GET /api/jobs/:id/status接口 - 前端用
setInterval或useEffect+fetch轮询,或升级为 WebSocket 订阅该jobId的实时更新 - 注意防抖轮询频率(如初始 1s,后续逐步延长至 5s),避免压垮服务端
关键是根据任务粒度、运行环境和监听需求选择合适抽象层。小任务用回调足够,多消费者用事件,需取消用 AbortSignal,跨进程则必须靠服务端状态管理。钩子本身不增加业务逻辑,但能让“看不见的运行”变得可观察、可干预、可信任。










