axios preferred way to abort request

src/features/OnlineExam/Examing/RemainTime.vue

@@ -3,7 +3,6 @@ import { httpApp } from "@/plugins/axiosApp";
 import { useTimers } from "@/setups/useTimers";
 import { store } from "@/store/store";
 import { showLogout } from "@/utils/utils";
-import axios, { Canceler } from "axios";
 import moment from "moment";
 import { onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -61,10 +60,10 @@ onMounted(async () => {
 });
 
 // 离开此页面时，可能还有心跳请求未返回
-onUnmounted(() => cancelHeartBeat && cancelHeartBeat());
+onUnmounted(() => cancelHeartBeat && cancelHeartBeat.abort());
 
 let handledNetworkException = false;
-let cancelHeartBeat: Canceler;
+let cancelHeartBeat: AbortController;
 async function getRemainTimeFromServer() {
   if (store.exam.remainTime <= 0 && store.exam.isSubmittingPaper) {
     logger({
@@ -79,6 +78,7 @@ async function getRemainTimeFromServer() {
   }
   try {
     logger({ cnl: ["server"], act: "发出心跳" });
+    cancelHeartBeat = new AbortController();
     const res = await httpApp.get(
       "/api/ecs_oe_student/examControl/examHeartbeat",
       {
@@ -87,7 +87,7 @@ async function getRemainTimeFromServer() {
           retryDelay: () => 10 * 1000,
         },
         noErrorMessage: true,
-        cancelToken: new axios.CancelToken((c) => (cancelHeartBeat = c)),
+        signal: cancelHeartBeat.signal,
       }
     );
     const rt: number = res.data;

src/features/OnlineExam/Examing/setups/useFaceCompare.ts

@@ -2,7 +2,6 @@ import { httpApp } from "@/plugins/axiosApp";
 import { useTimers } from "@/setups/useTimers";
 import { store } from "@/store/store";
 import { showLogout } from "@/utils/utils";
-import axios, { Canceler } from "axios";
 import { onUnmounted, watch } from "vue";
 
 // 不管被请求多少次，interval只需要初始化一次
@@ -91,10 +90,9 @@ export function useFaceCompare() {
   }
 
   // 离开此页面时，可能还有心跳请求未返回
-  onUnmounted(() => cancelShow && cancelShow());
+  onUnmounted(() => cancelShow && cancelShow.abort());
 
-  const CancelToken = axios.CancelToken;
-  let cancelShow: Canceler;
+  let cancelShow: AbortController;
 
   async function showSnapResult(
     fileName: string,
@@ -105,6 +103,8 @@ export function useFaceCompare() {
     try {
       // 给后台10秒的处理时间
       await new Promise((res) => setTimeout(res, 10 * 1000));
+      cancelShow = new AbortController();
+
       // 获取抓拍结果
       const snapRes =
         (
@@ -113,7 +113,7 @@ export function useFaceCompare() {
               fileName +
               "&examRecordDataId=" +
               examRecordDataId,
-            { cancelToken: new CancelToken((c) => (cancelShow = c)) }
+            { signal: cancelShow.signal }
           )
         ).data || {};
       if (snapRes.isCompleted) {