Vue3 axios 请求设置 signal 信号属性，以便 abort 取消请求

api：

taskMessage.ts

TypeScript 复制代码

// 通过用户名（账号），查询任务列表
export const taskService = (signal?: AbortSignal) => {
  return request.get("/task", {
    // 设置 signal 信号属性，后续就可以通过 abort 取消请求
    signal: signal
  });
};

// 通过用户名（账号），查询消息列表
export const messageService = (signal?: AbortSignal) => {
  return request.get("/message", {
    // 设置 signal 信号属性，后续就可以通过 abort 取消请求
    signal: signal
  });
};

发送 / 取消请求：

useFetchService.ts

TypeScript 复制代码

import { onUnmounted, ref, type Ref } from "vue";
import type { AxiosResponse } from "axios";

interface IFetchResponse<T> {
  data: Ref<T[]>;
  error: Ref<string>;
  isLoading: Ref<boolean>;
  refetch: () => Promise<void>;
}

/**
 * 请求服务 hook
 * @param service 请求服务方法
 * @param args 请求参数
 * @returns
 */
export const useFetchService = async <T>(
  service: (...args: any[]) => Promise<AxiosResponse<any, any>>,
  args: any[] = []
) => {
  // 请求服务
  const fetchService = async () => {
    try {
      state.isLoading.value = true;
      state.data.value = [];
      state.error.value = "";
      // 在参数数组中增加设置信号 AbortSignal，关联请求，以便能取消请求
      args.push(controller.signal);
      const result = await service(...args);
      state.data.value = result.data;
    } catch (error) {
      state.error.value = `服务调用失败: ${service.name}` + error;
      console.error(state.error.value);
    } finally {
      state.isLoading.value = false;
    }
  };
  // 创建及初始化状态
  const state: IFetchResponse<T> = {
    data: ref([]),
    error: ref(""),
    isLoading: ref(false),
    refetch: fetchService
  };
  // 创建 AbortController 用于取消请求
  const controller = new AbortController();

  onUnmounted(() => {
    // 取消请求
    controller.abort();
  });

  // 执行请求服务
  await fetchService();

  // 返回状态
  return state;
};