AbortController 入门教程
什么是 AbortController?
想象一下你在餐厅点餐的场景:你向服务员(相当于浏览器)下单(相当于发起请求),但突然改变主意想取消订单。AbortController 就像那个可以随时喊'取消订单'的按钮,让你能在请求完成前随时终止它。
为什么需要 AbortController?
在实际开发中,我们经常会遇到这些情况:
- 用户快速切换页面标签时,需要取消未完成的请求
- 搜索框输入时,取消之前的搜索请求
- 上传/下载大文件时,用户想中途取消
基本使用方法
创建一个 AbortController 其实非常简单:
- 首先实例化一个 AbortController 对象
- 从 controller 中获取 signal 信号
- 将 signal 传递给 fetch 请求
- 需要取消时调用 abort() 方法
代码示例:
const controller = new AbortController();
const { signal } = controller;
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request aborted');
} else {
console.error(error);
}
});
// 需要取消时调用
controller.abort();
实际应用示例
让我们看一个搜索功能的例子:
- 用户开始输入搜索词时,先检查是否有未完成的请求
- 如果有,调用 abort() 取消之前的请求
- 然后发起新的搜索请求
- 如果用户再次输入,重复上述过程
这样就能避免旧的搜索结果覆盖新的结果,提升用户体验。
代码示例:
let currentController = null;
function search() {
(currentController) {
currentController.();
}
currentController = ();
(, { : currentController. })
.( response.())
.( .(data));
}

