perf: cancel the request when leaving page

src/pages/cluster-management/apis/index.ts

@@ -156,9 +156,15 @@ export async function queryClusterItem(params: { id: number }, options?: any) {
   });
 }
 
-export async function queryClusterToken(params: { id: number }) {
+export async function queryClusterToken(
+  params: { id: number },
+  options?: {
+    token?: any;
+  }
+) {
   return request(`${CLUSTERS_API}/${params.id}/${CLUSTER_TOKEN}`, {
-    method: 'GET'
+    method: 'GET',
+    cancelToken: options?.token
   });
 }
 

src/pages/cluster-management/components/add-worker/index.tsx

@@ -1,4 +1,5 @@
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import { createAxiosToken } from '@/hooks/use-chunk-request';
 import ColumnWrapper from '@/pages/_components/column-wrapper';
 import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
 import { useIntl } from '@umijs/max';
@@ -59,8 +60,10 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
     stepList = []
   } = props || {};
   const intl = useIntl();
-  const { addedCount, createModelsChunkRequest } = useAddWorkerMessage();
+  const { addedCount, createModelsChunkRequest, chunkRequestRef } =
+    useAddWorkerMessage();
   const firstLoad = React.useRef(true);
+  const axiosTokenRef = React.useRef<any>(null);
   const [registrationInfo, setRegistrationInfo] = React.useState<{
     token: string;
     image: string;
@@ -75,7 +78,12 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
 
   const handleOnClusterChange = async (value: number, row?: any) => {
     try {
-      const data = await queryClusterToken({ id: value });
+      axiosTokenRef.current?.cancel?.();
+      axiosTokenRef.current = createAxiosToken();
+      const data = await queryClusterToken(
+        { id: value },
+        { token: axiosTokenRef.current.token }
+      );
       firstLoad.current = false;
       setRegistrationInfo({
         ...data,
@@ -92,12 +100,17 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
     }
     return () => {
       firstLoad.current = true;
+      chunkRequestRef.current?.current?.cancel?.();
+      axiosTokenRef.current?.cancel?.();
     };
   }, [open, cluster_id]);
 
   useEffect(() => {
     if (open) {
       createModelsChunkRequest();
+    } else {
+      chunkRequestRef.current?.current?.cancel?.();
+      axiosTokenRef.current?.cancel?.();
     }
   }, [open]);
 

src/pages/cluster-management/components/add-worker/select-cluster.tsx

@@ -1,7 +1,7 @@
 import BaseSelect from '@/components/seal-form/base/select';
 import { useIntl } from '@umijs/max';
 import { Spin, Typography } from 'antd';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useAddWorkerContext } from './add-worker-context';
 import { AddWorkerStepProps, StepNamesMap } from './config';
 import { Title } from './constainers';
@@ -20,10 +20,17 @@ const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
   } = useAddWorkerContext();
   const intl = useIntl();
 
-  const clusterId = summary.get('cluster_id');
+  const [clusterId, setClusterId] = useState<number | null>(
+    summary.get('cluster_id')
+  );
 
   const stepIndex = stepList.indexOf(StepNamesMap.SelectCluster) + 1;
 
+  const handleOnClusterChange = (value: number, option: any) => {
+    setClusterId(value);
+    onClusterChange?.(value, option);
+  };
+
   useEffect(() => {
     const unregister = registerField('cluster_id');
     return () => {
@@ -34,6 +41,7 @@ const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
   useEffect(() => {
     updateField('cluster_id', registrationInfo.cluster_id);
     // update cluster name in summary
+    setClusterId(registrationInfo.cluster_id);
     const selectedCluster = clusterList?.find(
       (item) => item.value === registrationInfo.cluster_id
     );
@@ -76,7 +84,7 @@ const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
           defaultValue={registrationInfo.cluster_id}
           options={clusterList}
           value={clusterId}
-          onChange={onClusterChange}
+          onChange={handleOnClusterChange}
           style={{ width: '100%' }}
         />
         {!clusterLoading && !clusterList?.length && (

src/pages/cluster-management/hooks/use-add-worker-message.ts

@@ -64,6 +64,7 @@ export default function useAddWorkerMessage() {
 
   return {
     addedCount,
+    chunkRequestRef,
     createModelsChunkRequest
   };
 }