vue 3 中用 canceltoken 手动中断查询，需创建可取消请求实例并主动调用 cancel 方法；通过 axios.canceltoken.source() 获取 token 和 cancel，将 cancel 存 ref 供按钮点击、新请求前或 onbeforeunmount 时调用，并用 axios.iscancel 区分取消与真实错误。
在 Vue 3 中用 CancelToken 手动中断查询，核心是“创建可取消的请求实例 + 主动调用 cancel 方法”。它不依赖自动拦截或全局状态，适合按钮点击、输入框搜索等明确由用户触发的中断场景。
创建并绑定 CancelToken 到单个请求
每次发起新请求前，先新建一个 CancelToken 源，并把它的 cancel 方法保存下来。这个方法就是后续手动中断的“开关”：
- 使用
axios.CancelToken.source()创建源对象，它包含token（传给请求）和cancel（用于中断） - 把
token放在请求配置的cancelToken字段里，注意不是放在params或data中 - 将
source.cancel存到组件响应式变量（如ref）中，方便后续调用
在需要时调用 cancel 方法
只要拿到之前保存的 cancel 函数，就能立刻终止对应请求。常见触发时机包括：
- 点击“取消”按钮：直接执行
cancelRef.value?.('用户主动取消') - 发起新查询前：先调用上一次的 cancel，再发新请求（避免并发）
- 组件卸载前（
onBeforeUnmount）：防止内存泄漏或更新已销毁组件
捕获并区分取消错误
被取消的请求会进 catch，但不能当成真实错误处理。必须用 axios.isCancel(error) 显式判断：
- 如果是取消，通常只记录日志或静默忽略，不提示用户、不修改 loading 状态
- 如果不是取消，才按常规逻辑处理错误（如展示提示、重试、清空数据）
- 注意：
error.message就是调用cancel()时传入的字符串，可用于调试定位
完整代码片段（组合式 API）
以下是在 setup 中的典型写法：
import { ref, onBeforeUnmount } from 'vue'
import axios from 'axios'
export default {
setup() {
const cancelRef = ref(null)
const loading = ref(false)
const fetchData = async (id) => {
// 1. 先取消上一次（如果存在）
cancelRef.value?.('新请求发起，取消旧请求')
// 2. 创建新 source
const source = axios.CancelToken.source()
cancelRef.value = source.cancel
loading.value = true
try {
const res = await axios.get(`/api/user/${id}`, {
cancelToken: source.token // ← 关键：与 url 同级
})
console.log(res.data)
} catch (err) {
if (axios.isCancel(err)) {
console.log('请求被取消：', err.message) // 如 "新请求发起，取消旧请求"
} else {
console.error('请求失败：', err)
}
} finally {
loading.value = false
}
}
// 3. 组件销毁前兜底取消
onBeforeUnmount(() => {
cancelRef.value?.('组件卸载')
})
return { fetchData, loading }
}
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
