记一次vue取消单个/批量全部接口请求

上传文件的安全退出处理

在处理上传文件时，确保在用户离开页面或关闭页面时，取消未完成的上传请求是非常重要的。以下是一个在 Vue 中使用 axios 进行文件上传的示例，并实现了安全退出时取消上传请求的方法。

首先，我们在统一存放 API 接口的 JavaScript 文件中定义了上传文件的 API：

// 上传文件的 API
export const upload = (data, config) =>
  request.post(`${serveName}/common/file/upload`, data, config);

在 Vue 组件中，我们可以这样使用该上传 API：

import { upload } from "@/api/upload/uploadAndDownload";
import axios from "axios";

export default {
  data() {
    return {
      uploadSources: [] // 用于存储 CancelToken 实例
    };
  },
  methods: {
    async uploadFile(formData) {
      const source = axios.CancelToken.source();
      this.uploadSources.push(source);
      const response = await upload(formData, {
        cancelToken: source.token
      });
      // 处理上传完成后的逻辑
      if (response.code === "00000") {
        // 处理上传成功的情况
      }
    },
    // 取消单个上传请求
    cancelTheUpload(index) {
      if (index >= 0 && index < this.uploadSources.length) {
        this.uploadSources[index].cancel("上传被取消");
        this.uploadSources.splice(index, 1); // 取消后从数组中移除取消令牌
      }
    },
    // 取消所有上传请求
    cancelAllUploads() {
      this.uploadSources.forEach(source => {
        source.cancel("上传被取消");
      });
      this.uploadSources = []; // 清空上传请求数组
    }
  }
};

在这个示例中，我们使用了 axios.CancelToken 来创建一个取消令牌，以确保在需要时可以取消上传请求。在 uploadFile 方法中，我们为每个上传请求创建一个新的取消令牌，并将其存储在 uploadSources 数组中。在 cancelTheUpload 方法中，我们可以取消单个上传请求，并从数组中移除相应的取消令牌。在 cancelAllUploads 方法中，我们可以取消所有的上传请求，并清空 uploadSources 数组。

这样，当用户离开页面或关闭页面时，我们可以调用 cancelAllUploads 方法来确保取消所有未完成的上传请求，以避免文件继续上传到服务器。