Vue 3 导出大量数据时允许用户中止任务的核心是统一使用 AbortController 的 signal 全链路控制：从分页 fetch、同步数据处理循环、WritableStream 写入到 Blob 生成，各环节均主动检查 signal.aborted 并及时退出，配合 onUnmounted 自动清理，确保中止彻底、无内存泄漏。

在 Vue 3 中导出大量数据时允许用户中止任务，核心是用 AbortController 主动中断整个导出流程，而不是只取消某个 fetch 请求。因为批量导出往往涉及分页拉取、流式生成、本地格式转换、写入 Blob 等多个环节，单靠取消一个请求远远不够。

导出场景常见结构要覆盖的环节

• 前端主动分页拉取后端数据（如 /api/export?page=1&size=5000）
• 拉取后逐块转成 CSV/JSONL 字符串（可能含同步耗时操作）
• 使用 WritableStream 或 TransformStream 流式写入
• 最终生成 Blob 并触发下载
• 用户点击「取消」按钮时，需立刻停止所有上述动作

关键做法：统一 signal + 全链路检查

把同一个 AbortSignal 传给所有可中断环节，并在关键节点主动判断 signal.aborted：

• 发起每个 fetch 时带上 { signal }
  多个分页请求必须共用同一个 signal，否则调一次 abort() 只中断一个请求

  const controller = new AbortController();
  const signal = controller.signal;
  
  for (let page = 1; page <= totalPages; page++) {
    if (signal.aborted) break;
    await fetch(`/api/export?page=${page}&size=5000`, { signal });
  }

• 在数据处理循环中定期检查
  避免在长同步操作（如拼接万行 CSV）中卡死，应拆成微任务并插入检查：

  for (let i = 0; i < data.length; i++) {
    if (signal.aborted) throw new Error('Aborted');
    // 处理单条数据
    csvRows.push(formatAsCsv(data[i]));
  
    // 每处理 100 条就让出主线程，便于响应 abort
    if (i % 100 === 0) await queueMicrotask(() => {});
  }

• 写入 WritableStream 时主动拦截
  write(chunk) 不接收 signal，但你可以在内部判断：

  

  Element Plus UI Vue3

  Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

  下载

  const stream = new WritableStream({
    write(chunk) {
      if (signal.aborted) return Promise.reject(new Error('Aborted'));
      // 正常写入逻辑
    },
    close() {
      if (signal.aborted) return;
      // 完成收尾
    }
  });

• 捕获 AbortError 后不重试，而是清理退出
  所有 .catch() 中识别 err.name === 'AbortError'，立即终止后续逻辑，关闭流、释放内存、重置 UI 状态：

  .catch(err => {
    if (err.name === 'AbortError') {
      writer?.close(); // 关闭写入器
      blobUrl && URL.revokeObjectURL(blobUrl);
      isExporting.value = false;
      return;
    }
    // 其他错误走正常报错流程
  })

Vue 3 组件中推荐的封装方式

<script setup>
import { ref, onUnmounted } from 'vue';

const isExporting = ref(false);
let controller = null;

function startExport() {
  controller = new AbortController();
  isExporting.value = true;

  exportData(controller.signal)
    .finally(() => {
      isExporting.value = false;
      controller = null;
    });
}

function cancelExport() {
  controller?.abort();
}

// 组件卸载时自动取消（防内存泄漏）
onUnmounted(() => {
  controller?.abort();
});
</script>

<template>
  <button @click="startExport" :disabled="isExporting">开始导出</button>
  <button @click="cancelExport" v-if="isExporting">取消</button>
</template>

不复杂但容易忽略

立即学习“前端免费学习笔记（深入）”；