【JavaScript】使用 AbortController 对象中断 fetch 的文本流传输

1. 使用Fetch API发起请求，获取响应流。 2. 通过response.body.getReader()获取读取器。 3. 循环读取数据块，直到done为true。 4. 处理每个数据块，使用TextDecoder解码。 5. 处理可能的错误，并允许取消请求。 6. ...

### 如何使用 AbortController 终止 Fetch 请求并传播到 Web Worker `AbortController` 是一种现代浏览器 API，允许开发者通过信号机制来取消异步操作。当 `fetch` 请求与 `AbortController` 结合时，可以优雅地中止网络请求[^1]。 以下是具体实现方式： #### 创建和控制中止信号 在主线程中创建一个 `AbortController` 实例，并将其 `signal` 属性传递给 `fetch` 函数作为选项的一部分。如果需要中断请求，则调用控制器的 `.abort()` 方法即可触发中止逻辑。 ```javascript // 主线程部分 const controller = new AbortController(); const signal = controller.signal; function fetchData(url) { return fetch(url, { signal }) .then(response => response.json()) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('An error occurred:', error); } }); } // 调用函数发起请求 const url = 'https://example.com/data'; fetchData(url); // 随后可以通过调用 abort 来停止正在进行的操作 controller.abort(); // 这里会抛出一个名为 "AbortError" 的错误 ``` #### 将中止行为传播至 Web Worker 为了使该功能扩展到 Web Worker 上下文中，需将相同的信号发送过去并通过消息通信共享状态变化的通知。 ```javascript // 在主线程上启动 worker 并同步信号 if (window.Worker) { const myWorker = new Worker('./worker.js'); // 向 worker 发送初始化命令连同当前信号的状态标志 myWorker.postMessage({ action: 'init', signalState: !signal.aborted }); // 当本地决定要终止所有活动的时候也要告知 workers 停止工作 controller.addEventListener('abort', () => { myWorker.postMessage({ action: 'stop' }); }); // 接收来自 worker 的反馈信息 myWorker.onmessage = function(e) { console.log(`Message received from worker: ${e.data}`); }; } ``` #### 处理 Web Worker 内部的任务管理 Web Workers 应独立维护自己的运行周期，并响应主页面传来的指令调整其动作流程。 ```javascript // worker.js 文件内容 self.onmessage = function(event) { switch (event.data.action) { case 'init': self.isRunning = event.data.signalState; break; case 'stop': self.isRunning = false; // 设置内部标志位表明应该退出循环或者跳过后续处理阶段 console.warn('Stopping operations inside the worker.'); break; default: break; } while(self.isRunning){ performHeavyTask(); } }; function performHeavyTask(){ let result = complexCalculation(); postMessage(result); } ``` 上述代码展示了如何利用 `AbortController` 不仅能够安全地结束由 `fetch` 引发的数据获取过程，而且还能有效地通知关联的工作进程适时释放资源从而避免潜在的性能瓶颈或内存泄露风险[^2]。