AbortController 入门教程：Web API 请求取消核心概念

AbortController 入门教程

什么是 AbortController？

想象一下你在餐厅点餐的场景：你向服务员（相当于浏览器）下单（相当于发起请求），但突然改变主意想取消订单。AbortController 就像那个可以随时喊'取消订单'的按钮，让你能在请求完成前随时终止它。

为什么需要 AbortController？

在实际开发中，我们经常会遇到这些情况：

• 用户快速切换页面标签时，需要取消未完成的请求
• 搜索框输入时，取消之前的搜索请求
• 上传/下载大文件时，用户想中途取消

基本使用方法

创建一个 AbortController 其实非常简单：

1. 首先实例化一个 AbortController 对象
2. 从 controller 中获取 signal 信号
3. 将 signal 传递给 fetch 请求
4. 需要取消时调用 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();

实际应用示例

让我们看一个搜索功能的例子：

1. 用户开始输入搜索词时，先检查是否有未完成的请求
2. 如果有，调用 abort() 取消之前的请求
3. 然后发起新的搜索请求
4. 如果用户再次输入，重复上述过程

这样就能避免旧的搜索结果覆盖新的结果，提升用户体验。

代码示例：

let currentController = null;

function search() {
   (currentController) {
    currentController.();
  }
  currentController =  ();
  
  (, { : currentController. })
    .( response.())
    .( .(data));
}