当前位置：首页 > web >正文

Vue3取消网络请求的方法（AbortController）

web 2025/5/2 5:57:51

在 Vue3 中，已经发出的请求是否可以被取消，取决于你使用的 HTTP 客户端库。Vue3 本身不直接处理 HTTP 请求，但通常搭配 Axios 或原生 fetch 使用。以下是两种主流方案的取消方法：

1. 使用 Axios + CancelToken

Axios 提供了 CancelToken 机制（新版推荐 AbortController，但 CancelToken 仍可用）。

javascript

import axios from 'axios';// 在 Vue3 组件中
export default {setup() {const cancelTokenSource = axios.CancelToken.source();const fetchData = async () => {try {const response = await axios.get('/api/data', {cancelToken: cancelTokenSource.token});// 处理响应} catch (error) {if (axios.isCancel(error)) {console.log('请求被取消:', error.message);} else {// 处理其他错误}}};// 取消请求的方法const cancelRequest = () => {cancelTokenSource.cancel('用户主动取消请求');};return { fetchData, cancelRequest };},
};

2. 使用 Fetch API + AbortController

原生 fetch 可通过 AbortController 取消请求。

javascript

// 在 Vue3 组件中
export default {setup() {let abortController = new AbortController();const fetchData = async () => {try {const response = await fetch('/api/data', {signal: abortController.signal});// 处理响应} catch (error) {if (error.name === 'AbortError') {console.log('请求被取消');} else {// 处理其他错误}}};// 取消请求的方法const cancelRequest = () => {abortController.abort();// 重新创建 Controller，以便下次请求使用abortController = new AbortController();};return { fetchData, cancelRequest };},
};

最佳实践

在组件卸载时自动取消
利用 Vue3 的生命周期钩子 onBeforeUnmount，避免组件卸载后仍更新状态。

javascript

import { onBeforeUnmount } from 'vue';export default {setup() {const abortController = new AbortController();const fetchData = async () => {// ... 使用 abortController.signal};onBeforeUnmount(() => {abortController.abort();});return { fetchData };},
};

封装自定义 Hook
使用 Composition API 封装可复用的请求逻辑。

javascript

// useFetch.js
import { ref, onBeforeUnmount } from 'vue';export function useFetch(url) {const data = ref(null);const error = ref(null);const abortController = new AbortController();const fetchData = async () => {try {const response = await fetch(url, { signal: abortController.signal });data.value = await response.json();} catch (e) {if (e.name !== 'AbortError') error.value = e;}};onBeforeUnmount(() => abortController.abort());return { data, error, fetchData, cancel: () => abortController.abort() };
}