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。

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

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

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