Vue + AbortController 请求取消弹窗 hook 封装
背景
实际业务开发场景中，往往存在有些大数据请求的需求，一旦请求发起加载遮罩后用户就无法操作了，直接尬住，所以提供一个支持取消查询的功能还是很有必要的，为了在全业务接口都能使用封装一个hook。
✋为什么要用 AbortController？
AbortController 是浏览器提供的原生 API，用于中止 Web 请求（如 Fetch）。你可以通过调用 abort() 来通知一个绑定了该信号（signal）的请求停止执行。
简单来说，它的用法是这样的：
const controller = new AbortController();
const signal = controller.signal;fetch('/api/slow-request', { signal }).catch(err => {if (err.name === 'AbortError') {console.log('请求被中止了');}
});setTimeout(() => {controller.abort(); // 中止请求
}, 2000);
这在 Vue 中也完全适用，尤其是你使用 Axios、Fetch 或其他支持 AbortSignal 的封装库时。
🧠 思考：hook设计需解决的问题？
-
启动查询时，展示一个 loading 动画。
-
2 秒后仍未返回结果，弹出一个“取消查询”的提示框。
-
如果用户点击“取消”，则主动中止请求。
-
请求成功或被取消后，清除提示框和 loading。
这就是我们这个 Hook 要完成的全部职责。
🏃➡ 实现步骤
第一步：定义中止信号 signal
我们在 Hook 中需要一个 ref 来存储当前的 AbortSignal，方便传给请求调用者。
const signal = ref<AbortSignal>({} as AbortSignal);
同时，我们在每次调用前重新创建一个 AbortController，保证每次请求都能独立控制。
第二步：启动 loading 和延迟弹窗
当用户点击“查询”按钮后，我们要立即显示一个 ElLoading 动画，然后 延迟 2 秒 后再弹出取消窗口。
为什么要延迟？
很多请求会在 2 秒内返回，没必要给用户太多打扰。我们只在“慢”的时候，才提醒用户可以取消。
loading = ElLoading.service({lock: true,text: '',background: 'rgba(0,0,0,0.2)',
});timer = setTimeout(() => {ElMessageBox.confirm('<div class="flex flex-col gap-3 items-center"><div class="w-10 h-10 border-4 border-t-blue-500 border-gray-300 rounded-full animate-spin"></div><p>查询中...</p></div>','提示',{dangerouslyUseHTMLString: true,customClass: 'custom-style',showClose: false,showCancelButton: false,confirmButtonText: '取消查询',closeOnClickModal: false,closeOnPressEscape: false,},).then(() => {// 中止请求controller.abort();// 中止 后端真实请求查询stopTrueRequest().then(() => {ElMessage.success('已取消查询！');});});}, 2000);
这个 MessageBox 是关键，它展示了一个动画+提示文字，并提供“取消查询”的按钮。当点击时，我们会执行：
controller.abort();
中止请求，取消回调里可以调用真实取消查询的接口。
第三步：清理 timer 和 loading
无论请求成功还是被取消，我们都要记得清理 timer 和 loading：
const cancelPendingAlert = () => {loading?.close();if (timer) {clearTimeout(timer);timer = null;}
};
// 卸载时也要清理
onUnmounted(() => {if (timer) clearTimeout(timer);if (loading) loading.close();
});最终 Hook 导出结构
return {loadCancelAlert,cancelPendingAlert,signal,
};
🚀 如何在页面中调用？
我们在业务组件中使用这个 Hook 时，可以这样写：
const { loadCancelAlert, cancelPendingAlert, signal } = useCancelRequest();const testCancel = () => {loadCancelAlert(); // 显示 loading & 准备弹窗testCancelApi('', signal.value).then(() => {cancelPendingAlert();}).finally(() => {cancelPendingAlert(); // 兜底关闭ElMessageBox.close(); // 主动关闭提示框});
};
注意这里的 testCancelApi 是你封装的接口请求函数，它需要支持接收 signal:
export function testCancelApi<T>(data: string, signal: AbortSignal) {return request<T>({url: '/api/v1/test',method: 'POST',data,signal, // ✨ 添加 signal 支持中断});
}
最终效果
界面
实际请求
hook 完整代码
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
import { onUnmounted, ref } from 'vue';export default function useCancelRequest() {const signal = ref<AbortSignal>({} as AbortSignal); // 终止标识let timer: ReturnType<typeof setTimeout> | null = null; // 定时器延迟弹窗加载let loading: LoadingInstance;/** 初始化取消请求弹窗 */const loadCancelAlert = () => {const controller = new AbortController(); // 请求终止器signal.value = controller.signal;loading = ElLoading.service({lock: true,text: '',background: 'rgab(0,0,0,0.2)',});timer = setTimeout(() => {ElMessageBox.confirm('<div class="flex flex-col gap-3 items-center"><div class="w-10 h-10 border-4 border-t-blue-500 border-gray-300 rounded-full animate-spin"></div><p>查询中...</p></div>','提示',{dangerouslyUseHTMLString: true,customClass: 'custom-style',showClose: false,showCancelButton: false,confirmButtonText: '取消查询',closeOnClickModal: false,closeOnPressEscape: false,},).then(() => {// 中止请求controller.abort();// 中止 后端真实请求查询stopTrueRequest().then(() => {ElMessage.success('已取消查询！');});});}, 2000);};// 请求完成时调用，取消加载取消请求弹窗const cancelPendingAlert = () => {loading?.close();if (timer) {clearTimeout(timer);timer = null;}};onUnmounted(() => {if (timer) clearTimeout(timer);if (loading) loading.close();});return {loadCancelAlert,cancelPendingAlert,signal,};
}
完结撒花🎉🎉🎉
欢迎点赞+收藏+关注😀