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

 api：

taskMessage.ts

// 通过用户名（账号），查询任务列表
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

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;
};