AbortController 入门:前端请求取消的最佳实践
作为前端开发者,我们常遇到这样的场景:用户快速切换页面标签、在搜索框连续输入关键词、或者上传大文件时突然想停止。这时候,如何优雅地取消正在进行的网络请求就显得尤为重要。
什么是 AbortController?
简单来说,AbortController 是浏览器提供的一个控制器对象,用于标记某个操作(通常是 fetch 请求)是否应该被中止。你可以把它想象成餐厅里的"退菜按钮"——当你向服务员下单后,如果突然改变主意,就可以按下这个按钮让厨房停止制作。
在实际开发中,它主要用于以下场景:
- 用户快速切换页面标签时,取消未完成的请求
- 搜索框输入时,取消之前的搜索请求,避免旧结果覆盖新结果
- 上传/下载大文件时,允许用户中途取消
核心用法解析
使用 AbortController 的流程其实非常直观,主要分为三步:创建控制器、获取信号、传递并调用中止。
1. 实例化与信号获取
首先创建一个 AbortController 实例,然后从中提取出 signal 属性。这个 signal 就是传递给请求的"开关"。
const controller = new AbortController();
const { signal } = controller;
2. 将信号传递给请求
在发起 fetch 请求时,将 signal 放入配置项中。这样浏览器就知道这个请求受控于该控制器。
fetch('/api/search?q=' + query, {
signal: signal
})
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
throw err;
}
});
3. 执行中止操作
当需要取消请求时,只需调用控制器的 abort() 方法。此时 Promise 会被拒绝,并抛出 AbortError。
// 随时可以调用
controller.abort();

