fix: 修复菜单在未请求完成时切换菜单出现数据回显卡顿问题

packages/axios/src/constant.ts

@@ -3,3 +3,6 @@ export const REQUEST_ID_KEY = 'X-Request-Id';
 
 /** the backend error code key */
 export const BACKEND_ERROR_CODE = 'BACKEND_ERROR';
+
+/** the request canceled code */
+export const REQUEST_CANCELED_CODE = 'ERR_CANCELED';

packages/axios/src/index.ts

@@ -3,7 +3,7 @@ import type { AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } f
 import axiosRetry from 'axios-retry';
 import { nanoid } from '@sa/utils';
 import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
-import { BACKEND_ERROR_CODE, REQUEST_ID_KEY } from './constant';
+import { BACKEND_ERROR_CODE, REQUEST_CANCELED_CODE, REQUEST_ID_KEY } from './constant';
 import type {
   CustomAxiosRequestConfig,
   FlatRequestInstance,
@@ -178,6 +178,6 @@ export function createFlatRequest<ResponseData = any, State = Record<string, unk
   return flatRequest;
 }
 
-export { BACKEND_ERROR_CODE, REQUEST_ID_KEY };
+export { BACKEND_ERROR_CODE, REQUEST_CANCELED_CODE, REQUEST_ID_KEY };
 export type * from './type';
 export type { CreateAxiosDefaults, AxiosError };

src/service/api/system/menu.ts

@@ -1,11 +1,12 @@
 import { request } from '@/service/request';
 
 /** 获取菜单列表 */
-export function fetchGetMenuList(params?: Api.System.MenuSearchParams) {
+export function fetchGetMenuList(params?: Api.System.MenuSearchParams, signal?: AbortSignal) {
   return request<Api.System.MenuList>({
     url: '/system/menu/list',
     method: 'get',
-    params
+    params,
+    signal
   });
 }
 

src/service/request/index.ts

@@ -1,5 +1,5 @@
 import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
-import { BACKEND_ERROR_CODE, createFlatRequest } from '@sa/axios';
+import { BACKEND_ERROR_CODE, REQUEST_CANCELED_CODE, createFlatRequest } from '@sa/axios';
 import { useAuthStore } from '@/store/modules/auth';
 import { localStg, sessionStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
@@ -142,7 +142,12 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
     onError(error) {
       // when the request is fail, you can show error message
 
+      if (error.code === REQUEST_CANCELED_CODE) {
+        return;
+      }
+
       let message = error.message;
+
       let backendErrorCode = '';
 
       // get backend error message and code

src/typings/components.d.ts

@@ -23,9 +23,15 @@ declare module 'vue' {
     FileUpload: typeof import('./../components/custom/file-upload.vue')['default']
     FormTip: typeof import('./../components/custom/form-tip.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
+    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
+    IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     'IconHugeicons:configuration01': typeof import('~icons/hugeicons/configuration01')['default']
     IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    IconLocalBanner: typeof import('~icons/local/banner')['default']
     'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
     'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
     'IconMaterialSymbols:downloadRounded': typeof import('~icons/material-symbols/download-rounded')['default']
@@ -37,8 +43,14 @@ declare module 'vue' {
     IconMaterialSymbolsAddRounded: typeof import('~icons/material-symbols/add-rounded')['default']
     IconMaterialSymbolsDeleteOutline: typeof import('~icons/material-symbols/delete-outline')['default']
     IconMaterialSymbolsDriveFileRenameOutlineOutline: typeof import('~icons/material-symbols/drive-file-rename-outline-outline')['default']
+    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
+    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiDrag: typeof import('~icons/mdi/drag')['default']
+    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
+    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     'IconQuill:collapse': typeof import('~icons/quill/collapse')['default']
     'IconQuill:expand': typeof import('~icons/quill/expand')['default']
+    IconUilSearch: typeof import('~icons/uil/search')['default']
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
@@ -47,17 +59,24 @@ declare module 'vue' {
     MenuTreeSelect: typeof import('./../components/custom/menu-tree-select.vue')['default']
     MonacoEditor: typeof import('./../components/common/monaco-editor.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
     NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
@@ -73,23 +92,36 @@ declare module 'vue' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NP: typeof import('naive-ui')['NP']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
+    NPopover: typeof import('naive-ui')['NPopover']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioButton: typeof import('naive-ui')['NRadioButton']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTab: typeof import('naive-ui')['NTab']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
+    NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     PostSelect: typeof import('./../components/custom/post-select.vue')['default']

src/views/system/menu/index.vue

@@ -142,13 +142,20 @@ const tagMap: Record<'0' | '1' | '2', NaiveUI.ThemeColor> = {
   '2': 'primary'
 };
 
+let controller = new AbortController();
+
 async function getBtnMenuList() {
   if (!currentMenu.value?.menuId) {
     return;
   }
+  controller.abort();
+  controller = new AbortController();
   startBtnLoading();
   btnData.value = [];
-  const { data, error } = await fetchGetMenuList({ parentId: currentMenu.value?.menuId, menuType: 'F' });
+  const { data, error } = await fetchGetMenuList(
+    { parentId: currentMenu.value?.menuId, menuType: 'F' },
+    controller.signal
+  );
   if (error) return;
   btnData.value = data || [];
   endBtnLoading();