跟着 MDN 学 HTML day_30：（AbortController 实现可取消的异步请求）

在现代 Web 开发中异步操作随处可见尤其是网络请求。但有时候我们需要主动取消一个正在进行的请求比如用户切换了页面、重复提交表单、或者文件下载被中断。传统的做法往往难以优雅地处理这些场景。AbortController的出现为我们提供了一套标准化、可复用的中止机制。一、AbortController 是什么AbortController 是一个内置的 Web API它允许我们主动取消一个或多个正在进行的异步操作。最典型的应用场景是与 Fetch API 配合取消正在发送的网络请求。它的核心设计思路是将“控制权”和“信号”分离控制器负责发出中止指令信号对象负责将这个指令传递给具体的异步操作。// 创建一个控制器实例constcontrollernewAbortController();// 获取与该控制器关联的信号对象constsignalcontroller.signal;// 监控信号是否被中止signal.addEventListener(abort,(){console.log(操作已被取消原因为,signal.reason);});// 在需要的时候调用 abort 方法controller.abort();// 输出: 操作已被取消原因为AbortError需要注意的是每个 AbortController 实例只能使用一次。一旦调用了 abort 方法关联的 signal 状态就会变成“已中止”无法逆转。二、构造函数与实例属性AbortController 的 API 设计非常简洁。通过构造函数创建实例后最常用的属性就是 signal它返回一个 AbortSignal 对象用于向异步操作传递取消信号。// 演示 signal 属性的使用functioncreateCancellableOperation(){constcontrollernewAbortController();const{signal}controller;console.log(信号初始状态:,signal.aborted);// false// 设置一个定时器5秒后自动取消consttimeoutIdsetTimeout((){controller.abort();console.log(信号中止后状态:,signal.aborted);// trueconsole.log(中止原因:,signal.reason);},5000);return{controller,signal};}const{controller,signal}createCancellableOperation();// 可以在任意时刻主动取消// controller.abort();signal 对象还有一个 aborted 属性用于判断操作是否已经被取消。在实际开发中我们通常会将 signal 作为参数传递给支持取消机制的异步函数。三、abort 方法的核心用法abort 方法是 AbortController 的灵魂。调用它会触发 signal 的 abort 事件同时将 signal.aborted 设置为 true。传入可选的 reason 参数可以更好地描述取消的原因。// 演示带原因的中止操作asyncfunctionfetchWithCustomAbort(url){constcontrollernewAbortController();constsignalcontroller.signal;// 5秒后自动取消请求并指定原因consttimeoutIdsetTimeout((){controller.abort(请求超时已自动取消);},5000);try{constresponseawaitfetch(url,{signal});clearTimeout(timeoutId);constdataawaitresponse.json();console.log(请求成功:,data);returndata;}catch(error){if(error.nameAbortError){console.log(请求被取消原因:,signal.reason);}else{console.log(请求出错:,error);}}}// 手动取消的示例constmanualControllernewAbortController();manualController.abort(用户点击了取消按钮);// 此时 manualController.signal.reason 的值为 用户点击了取消按钮从 98 版本开始的 Chrome 和 97 版本的 Firefox 开始abort 方法支持传入自定义的 reason 参数这大大方便了错误追踪和用户提示。四、中止 Fetch 请求的完整示例这是 AbortController 最经典的应用场景。当用户快速切换页面或者重复提交表单时我们可以取消那些不再需要的请求节省带宽并避免状态混乱。// 完整的视频下载控制示例classVideoDownloader{constructor(){this.currentControllernull;this.downloadBtndocument.getElementById(downloadBtn);this.abortBtndocument.getElementById(abortBtn);this.statusDivdocument.getElementById(status);this.downloadBtn.addEventListener(click,()this.startDownload());this.abortBtn.addEventListener(click,()this.cancelDownload());}asyncstartDownload(){// 如果已有下载在进行先取消它if(this.currentController){this.currentController.abort(新的下载任务已启动);}this.currentControllernewAbortController();constsignalthis.currentController.signal;this.statusDiv.textContent下载中...;this.downloadBtn.disabledtrue;this.abortBtn.disabledfalse;try{constresponseawaitfetch(/large-video.mp4,{signal});if(!response.ok){thrownewError(HTTP${response.status});}constvideoBlobawaitresponse.blob();this.statusDiv.textContent下载完成;console.log(视频大小:,(videoBlob.size/1024/1024).toFixed(2),MB);}catch(error){if(error.nameAbortError){this.statusDiv.textContent下载已取消;}else{this.statusDiv.textContent下载失败:${error.message};}}finally{this.downloadBtn.disabledfalse;this.abortBtn.disabledtrue;this.currentControllernull;}}cancelDownload(){if(this.currentController){this.currentController.abort(用户主动取消);console.log(已发送取消指令);}}}// 初始化下载器newVideoDownloader();当 abort 方法被调用时fetch 返回的 Promise 会立即 reject错误对象的名字为 AbortError。通过捕获这个特定错误我们可以给用户提供清晰的状态反馈。五、同时中止多个请求AbortController 的一个强大特性是一个控制器可以关联多个异步操作。这意味着我们可以用一个“总开关”同时取消多个请求。// 批量请求的中止管理asyncfunctionsearchProducts(keyword){constcontrollernewAbortController();constsignalcontroller.signal;// 同时发起三个相关的 API 请求constendpoints[/api/products?q${keyword},/api/categories?q${keyword},/api/recommendations?q${keyword}];constpromisesendpoints.map(endpointfetch(endpoint,{signal}).then(resres.json()).catch(err{if(err.name!AbortError){console.error(${endpoint}请求失败:,err);}returnnull;}));// 设置超时自动取消consttimeoutIdsetTimeout((){controller.abort(搜索超时);console.log(已取消所有搜索请求);},3000);try{constresultsawaitPromise.all(promises);clearTimeout(timeoutId);const[products,categories,recommendations]results;return{products,categories,recommendations};}catch(error){if(error.nameAbortError){console.log(搜索请求已取消);}throwerror;}finally{clearTimeout(timeoutId);}}// 使用示例letcurrentSearchnull;asyncfunctionhandleSearch(){// 清除之前的搜索if(currentSearch){currentSearch.abort();}constkeyworddocument.getElementById(searchInput).value;constcontrollernewAbortController();currentSearchcontroller;try{constresultsawaitsearchProducts(keyword);console.log(搜索结果:,results);}catch(error){if(error.name!AbortError){console.error(搜索出错:,error);}}finally{if(currentSearchcontroller){currentSearchnull;}}}这种模式在实现搜索建议、数据预取、或者需要清理旧请求的场景中非常实用。六、浏览器兼容性与注意事项AbortController 在现代浏览器中得到了广泛支持。Chrome 66、Firefox 57、Safari 12.1、Edge 16 及以上版本都完全支持。Node.js 从 14.17 版本开始也支持了这个 API。在使用时需要注意以下几点每个控制器只能使用一次中止后无法重置不是所有异步操作都支持 AbortSignal目前原生支持的主要是 Fetch API、某些流操作以及部分 Node.js API在取消请求后服务器端可能仍在处理请求取消只影响客户端等待响应的行为。// 兼容性处理示例functioncreateCancellableFetch(url,options{}){// 检测是否支持 AbortControllerif(typeofAbortControllerundefined){console.warn(当前环境不支持 AbortController将发起不可取消的请求);returnfetch(url,options);}constcontrollernewAbortController();constrequestfetch(url,{...options,signal:controller.signal});// 返回增强的 Promise附加 cancel 方法constcancellablePromiserequest;cancellablePromise.cancel()controller.abort();returncancellablePromise;}// 使用示例constfetchTaskcreateCancellableFetch(/api/data);fetchTask.catch(error{if(error.nameAbortError){console.log(用户取消了请求);}});// 需要取消时// fetchTask.cancel();AbortController 的出现让前端开发者终于有了一个标准化的方式来取消异步操作。掌握它的用法可以让我们在处理复杂用户交互时写出更加健壮和优雅的代码。想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗持续关注后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容带你从新手快速进阶轻松搞定前端开发