Vue 3 中请求取消怎么配合下拉刷新动作取消旧的数据请求-Vue.js-PHP中文网

下拉刷新时取消旧请求的核心是每次刷新前调用abortcontroller.abort()中断未完成请求，再新建控制器发起新请求，确保响应不覆盖、状态不混乱。

vue 3 中请求取消怎么配合下拉刷新动作取消旧的数据请求

下拉刷新时取消旧请求，核心是确保“新刷新动作发起前，正在执行的旧请求被中止”，避免旧响应覆盖新数据、造成状态错乱或重复渲染。Vue 3 中最可靠、标准的方式是结合 AbortController 与组件生命周期（尤其是 onBeforeUnmount 和手动触发时机）来管理请求信号。

下拉刷新场景的特点

用户下拉触发刷新，通常会：

重置分页参数（如 page = 1、offset = 0）
清空当前列表数据
立即发起新请求获取最新数据
若上一次请求（比如上拉加载或上次刷新）还没返回，它的响应必须被忽略

用 AbortController 主动中断旧请求

每次发起请求前，先检查是否存在未完成的控制器，有则调用 abort()；再创建新控制器并传入 signal。关键点在于：**下拉刷新函数内部要负责清理和重建**。

示例代码（组合式 API）：

import { ref, onBeforeUnmount } from 'vue'
import axios from 'axios'

const loading = ref(false)
const list = ref([])
const abortController = ref(null)

const refresh = async () => {
  // 1. 取消上一次未完成的请求（如有）
  if (abortController.value) {
    abortController.value.abort()
  }

  loading.value = true
  list.value = [] // 清空旧数据，视觉上立刻响应

  // 2. 创建新控制器
  abortController.value = new AbortController()

  try {
    const res = await axios.get('/api/items', {
      params: { page: 1 },
      signal: abortController.value.signal
    })
    list.value = res.data
  } catch (err) {
    if (axios.isCancel(err)) {
      console.log('刷新请求已被取消')
    } else {
      console.error('刷新失败', err)
    }
  } finally {
    loading.value = false
    // 注意：不在此处置 null，因为可能还有上拉加载等其他请求在用
  }
}

// 组件卸载时兜底取消
onBeforeUnmount(() => {
  if (abortController.value) {
    abortController.value.abort()
  }
})