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

2025-12-28 14:34:42 +08:00
parent abdbef2d05
commit 420637352d
3 changed files with 101 additions and 23 deletions
--- a/src/pages/alarm-page.vue
+++ b/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({
-      model: {},
-      extra: getExtraFields(),
-      current: pagination.page ?? 1,
-      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
-      sort: 'id',
-      order: 'descending',
-    });
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    const signal = abortController.value.signal;
+
+    const res = await pageDeviceAlarmLogApi(
+      {
+        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({
-      model: {},
-      extra: getExtraFields(),
-      current: pagination.page ?? 1,
-      size: pagination.pageSize ?? 10,
-      order: 'descending',
-      sort: 'id',
-    });
+    abortController.value.abort();
+    abortController.value = new AbortController();
+
+    const signal = abortController.value.signal;
+
+    const data = await exportDeviceAlarmLogApi(
+      {
+        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>
--- a/src/pages/call-log-page.vue
+++ b/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>
--- a/src/pages/vimp-log-page.vue
+++ b/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>