优雅取消：在 Vue 组合式 API 中集成 AbortController 处理异步竞态

讲解如何利用 AbortController 在 Vue 3 setup 中自动取消过时的 API 请求，避免组件卸载时的内存泄漏和竞态条件。 · 难度：入门 · +10XP

优雅取消：在 Vue 组合式 API 中集成 AbortController 处理异步竞态

前端异步请求常因路由切换或组件卸载导致状态更新冲突。本教程深入 Vue 3 组合式函数，封装一个可自动绑定组件生命周期的 abort 控制器，结合 watchEffect 的 onCleanup 机制，在请求发起前自动中止上一个未完成的请求，实现精准的竞态取消。

import { ref, onUnmounted } from 'vue'
export function useAbortableFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const controller = ref(new AbortController())
  async function fetchData() {
    controller.value.abort()
    controller.value = new AbortController()
    loading.value = true
    try {
      const res = await fetch(url.value, { signal: controller.value.signal })
      data.value = await res.json()
    } catch (e) {
      if (e.name !== 'AbortError') throw e
    } finally {
      loading.value = false
    }
  }
  onUnmounted(() => controller.value.abort())
  return { data, loading, fetchData }
}