feat: 查询页面卸载时取消未完成的请求

src/pages/alarm-page.vue

@@ -7,6 +7,7 @@ import { useAlarmStore, useDeviceStore, useStationStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { watchDebounced } from '@vueuse/core';
+import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import {
   NButton,
@@ -26,7 +27,7 @@ import {
   type SelectOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, onBeforeMount, reactive, ref, watch, type CSSProperties } from 'vue';
+import { computed, h, onBeforeMount, onBeforeUnmount, reactive, ref, watch, type CSSProperties } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
@@ -211,16 +212,28 @@ const pagination = reactive<PaginationProps>({
   },
 });
 
+const abortController = ref(new AbortController());
+
 const { mutate: getTableData, isPending: tableLoading } = useMutation({
   mutationFn: async () => {
-    const res = await pageDeviceAlarmLogApi({
+    abortController.value.abort();
-      model: {},
+    abortController.value = new AbortController();
-      extra: getExtraFields(),
+
-      current: pagination.page ?? 1,
+    const signal = abortController.value.signal;
-      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+
-      sort: 'id',
+    const res = await pageDeviceAlarmLogApi(
-      order: 'descending',
+      {
-    });
+        model: {},
+        extra: getExtraFields(),
+        current: pagination.page ?? 1,
+        size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+        sort: 'id',
+        order: 'descending',
+      },
+      {
+        signal,
+      },
+    );
     return res;
   },
   onSuccess: (res) => {
@@ -230,6 +243,7 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
     tableData.value = records;
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -256,14 +270,24 @@ const onClickQuery = () => {
 
 const { mutate: exportTableData, isPending: exporting } = useMutation({
   mutationFn: async () => {
-    const data = await exportDeviceAlarmLogApi({
+    abortController.value.abort();
-      model: {},
+    abortController.value = new AbortController();
-      extra: getExtraFields(),
+
-      current: pagination.page ?? 1,
+    const signal = abortController.value.signal;
-      size: pagination.pageSize ?? 10,
+
-      order: 'descending',
+    const data = await exportDeviceAlarmLogApi(
-      sort: 'id',
+      {
-    });
+        model: {},
+        extra: getExtraFields(),
+        current: pagination.page ?? 1,
+        size: pagination.pageSize ?? 10,
+        order: 'descending',
+        sort: 'id',
+      },
+      {
+        signal,
+      },
+    );
     return data;
   },
   onSuccess: (data) => {
@@ -271,6 +295,7 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
     downloadByData(data, `设备告警记录_${time}.xlsx`);
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -280,6 +305,9 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
 onBeforeMount(() => {
   getTableData();
 });
+onBeforeUnmount(() => {
+  abortController.value.abort();
+});
 </script>
 
 <template>

src/pages/call-log-page.vue

@@ -3,6 +3,7 @@ import { exportCallLogApi, pageCallLogApi, type NdmCallLog, type NdmCallLogResul
 import { useStationStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import {
   NButton,
@@ -21,7 +22,7 @@ import {
   type SelectOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { h } from 'vue';
+import { h, onBeforeUnmount } from 'vue';
 import { computed, reactive, ref, watch, watchEffect } from 'vue';
 
 interface SearchFields extends PageQueryExtra<NdmCallLog> {
@@ -105,9 +106,18 @@ const pagination = reactive<PaginationProps>({
   },
 });
 
+const abortController = ref(new AbortController());
+
 const { mutate: getTableData, isPending: tableLoading } = useMutation({
   mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
     if (!searchFields.value.stationCode) throw Error('请选择车站');
+
+    const stationCode = searchFields.value.stationCode;
+    const signal = abortController.value.signal;
+
     const res = await pageCallLogApi(
       {
         model: {},
@@ -118,7 +128,8 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
         sort: 'id',
       },
       {
-        stationCode: searchFields.value.stationCode,
+        stationCode,
+        signal,
       },
     );
     return res;
@@ -130,6 +141,7 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
     tableData.value = records;
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -154,7 +166,14 @@ const onClickQuery = () => {
 
 const { mutate: exportTableData, isPending: exporting } = useMutation({
   mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
     if (!searchFields.value.stationCode) throw Error('请选择车站');
+
+    const stationCode = searchFields.value.stationCode;
+    const signal = abortController.value.signal;
+
     const data = await exportCallLogApi(
       {
         model: {},
@@ -165,7 +184,8 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
         sort: 'id',
       },
       {
-        stationCode: searchFields.value.stationCode,
+        stationCode,
+        signal,
       },
     );
     return data;
@@ -175,6 +195,7 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
     downloadByData(data, `上级调用日志_${time}.xlsx`);
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -204,6 +225,10 @@ watch(
     immediate: true,
   },
 );
+
+onBeforeUnmount(() => {
+  abortController.value.abort();
+});
 </script>
 
 <template>

src/pages/vimp-log-page.vue

@@ -32,6 +32,7 @@ import { exportVimpLogApi, pageVimpLogApi, type NdmVimpLog, type NdmVimpLogResul
 import { useStationStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
+import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import destr from 'destr';
 import {
@@ -53,7 +54,7 @@ import {
   type SelectOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, reactive, ref, watch, watchEffect } from 'vue';
+import { computed, h, onBeforeUnmount, reactive, ref, watch, watchEffect } from 'vue';
 
 interface SearchFields extends PageQueryExtra<NdmVimpLog> {
   stationCode?: Station['code'];
@@ -176,9 +177,18 @@ const pagination = reactive<PaginationProps>({
   },
 });
 
+const abortController = ref(new AbortController());
+
 const { mutate: getTableData, isPending: tableLoading } = useMutation({
   mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
     if (!searchFields.value.stationCode) throw Error('请选择车站');
+
+    const stationCode = searchFields.value.stationCode;
+    const signal = abortController.value.signal;
+
     const res = await pageVimpLogApi(
       {
         model: {},
@@ -189,7 +199,8 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
         sort: 'id',
       },
       {
-        stationCode: searchFields.value.stationCode,
+        stationCode,
+        signal,
       },
     );
     return res;
@@ -201,6 +212,7 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
     tableData.value = records;
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -225,7 +237,14 @@ const onClickQuery = () => {
 
 const { mutate: exportTableData, isPending: exporting } = useMutation({
   mutationFn: async () => {
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
     if (!searchFields.value.stationCode) throw Error('请选择车站');
+
+    const stationCode = searchFields.value.stationCode;
+    const signal = abortController.value.signal;
+
     const data = await exportVimpLogApi(
       {
         model: {},
@@ -236,7 +255,8 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
         sort: 'id',
       },
       {
-        stationCode: searchFields.value.stationCode,
+        stationCode,
+        signal,
       },
     );
     return data;
@@ -246,6 +266,7 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
     downloadByData(data, `视频操作日志_${time}.xlsx`);
   },
   onError: (error) => {
+    if (isCancel(error)) return;
     console.error(error);
     const errorFeedback = parseErrorFeedback(error);
     window.$message.error(errorFeedback);
@@ -275,6 +296,10 @@ watch(
     immediate: true,
   },
 );
+
+onBeforeUnmount(() => {
+  abortController.value.abort();
+});
 </script>
 
 <template>