Vue3取消网络请求的方法(AbortController)

在 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() };
}

关键点总结

  • Axios :使用 CancelToken.source()AbortController(Axios >= 0.22.0)。

  • Fetch :必须依赖 AbortController

  • 组件销毁时清理:通过生命周期钩子自动取消未完成的请求,避免内存泄漏。

  • 错误处理:捕获取消错误,避免与常规错误混淆。

根据项目使用的库选择对应方案即可实现请求取消。

相关推荐
FanetheDivine1 分钟前
常见的AI对话场景和特殊情况
前端·react.js
sophie旭3 分钟前
一道面试题,开始性能优化之旅(5)-- 浏览器和性能
前端·面试·性能优化
lypzcgf10 分钟前
Coze源码分析-资源库-编辑知识库-前端源码-核心组件
前端·知识库·coze·coze源码分析·智能体平台·ai应用平台·agent平台
小墨宝14 分钟前
web前端学习 langchain
前端·学习·langchain
北城以北888818 分钟前
Vue--Vue基础(一)
前端·javascript·vue.js
IT_陈寒1 小时前
Python 3.12新特性实战:5个让你的代码提速30%的性能优化技巧
前端·人工智能·后端
sniper_fandc1 小时前
Vue Router路由
前端·javascript·vue.js
excel1 小时前
为什么 Vue 组件中的 data 必须是一个函数?(含 Vue2/3 对比)
前端
妄小闲2 小时前
成品网站模板源码 网站源码模板 html源码下载
前端·html
知识分享小能手10 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台