一、基本概念

AbortController 是浏览器提供的一个 API，用于取消正在进行的异步操作（如 fetch 请求）。

const controller = new AbortController()
// ↑ ↑
// 控制器实例 创建一个中止控制器

二、核心组成

1. AbortController（控制器）

const controller = new AbortController()

// 属性
controller.signal // AbortSignal 对象，用于传递给 fetch

// 方法
controller.abort() // 触发中止操作

2. AbortSignal（信号）

const signal = controller.signal

// 属性
signal.aborted // boolean，是否已中止

// 事件
signal.addEventListener('abort', () => {
 console.log('请求被中止了！')
})

三、在我们代码中的使用

完整流程
const activeController = ref(null)

const streamAiResponse = async (prompt: string) => {
 // 步骤1: 如果有正在进行的请求，先中止它
 if (activeController.value) {
   activeController.value.abort() // 中止之前的请求
   activeController.value = null
 }

 // 步骤2: 创建新的控制器
 const controller = new AbortController()
 activeController.value = controller
 
 try {
   // 步骤3: 发起请求，传入 signal
   const response = await fetch(AI_ENDPOINT, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ question: prompt }),
     signal: controller.signal // 关键：传入信号
   })
   
   // ... 处理响应
   
 } catch (error) {
   // 步骤4: 捕获中止错误
   if (error.name === 'AbortError') {
     console.log('请求被用户中止')
   } else {
     console.error('其他错误:', error)
   }
 } finally {
   // 步骤5: 清理
   activeController.value = null
 }
}

四、实际使用场景

场景 1: 用户快速连续发送多条消息

// 用户操作时间线：
// t=0s : 发送 "什么是 Vue?" → 请求 A 开始
// t=0.5s: 发送 "什么是 React?" → 请求 A 被中止，请求 B 开始
// t=1s : 发送 "什么是 Angular?" → 请求 B 被中止，请求 C 开始

// 代码执行：
const sendMessage = () => {
 // 第一次发送
 streamAiResponse("什么是 Vue?")
 // activeController.value = Controller_A
 
 // 第二次发送（用户很快又点击了）
 streamAiResponse("什么是 React?")
 // Controller_A.abort() ← 中止第一个请求
 // activeController.value = Controller_B
 
 // 第三次发送
 streamAiResponse("什么是 Angular?")
 // Controller_B.abort() ← 中止第二个请求
 // activeController.value = Controller_C
}

没有 AbortController 的问题：三个请求同时进行，不知道哪个请求先返回，界面可能显示错误的结果，浪费网络资源

有 AbortController：只有最后一个请求在进行，保证显示的是最新问题的答案，节省网络资源

五、总结

AbortController 的作用：

取消请求 - 中止正在进行的 fetch 请求

避免冲突 - 防止多个请求同时进行

节省资源 - 停止不需要的网络传输

保证正确 - 确保显示最新问题的答案

用户体验 - 用户可以随时中断和重新发起

简单理解：就像电视遥控器的"停止"按钮，可以随时终止正在播放的内容！