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

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

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

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

相关推荐
太过平凡的小蚂蚁26 分钟前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
苹果醋31 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫1 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐1 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳1 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng3 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪3 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛3 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能3 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost3 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端