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;
};
相关推荐
ZZHow10246 分钟前
React前端开发_Day12_极客园移动端项目
前端·笔记·react.js·前端框架·web
@HNUSTer10 分钟前
基于 HTML、CSS 和 JavaScript 的智能图像边缘检测系统
开发语言·前端·javascript·css·html
咔咔一顿操作21 分钟前
第六章 Vue3 + Three.js 实现高质量全景图查看器:从基础到优化
开发语言·javascript·人工智能·ecmascript·threejs
lecepin43 分钟前
前端技术月刊-2025.9
前端·javascript·面试
IT_陈寒1 小时前
Python 3.12 的7个性能优化技巧,让你的代码快如闪电!
前端·人工智能·后端
excel1 小时前
JSON 使用指南:从基础语法到 stringify/parse 的高级技巧
前端
yinuo1 小时前
Uni-App跨端开发实战:编译APP跳转全平台终极指南(02)
前端
楼田莉子1 小时前
前端学习——CSS
前端·css·学习
掘金安东尼1 小时前
理解 Promise.any():一次成功就行
前端·javascript·面试
掘金安东尼1 小时前
CSS 电梯:纯 CSS 实现的状态机与楼层导航
前端·javascript·github