refactor(platform): optimize api of http request

Author: xiejay97

packages/platform/src/app/core/http/useHttp.ts

@@ -28,13 +28,7 @@ export function useHttp() {
   const location = useLocation();
   const { t } = useTranslation();
 
-  useUnmount(() => {
-    for (const abort of dataRef.current.abortFns) {
-      abort();
-    }
-  });
-
-  return useEventCallback(
+  const http = useEventCallback(
     <T = any, D = any>(
       config: AxiosRequestConfig<D>,
       options?: { unmount?: boolean; authorization?: boolean }
@@ -106,4 +100,16 @@ export function useHttp() {
       return req as any;
     }
   );
+
+  http['abortAll'] = () => {
+    for (const abort of dataRef.current.abortFns) {
+      abort();
+    }
+  };
+
+  useUnmount(() => {
+    http['abortAll']();
+  });
+
+  return http as typeof http & { abortAll: () => void };
 }

packages/platform/src/app/hooks/useAPI.ts

@@ -1,7 +1,7 @@
 // https://cloud.google.com/apis/design
-import { useEventCallback } from '@react-devui/hooks';
+import type { useHttp } from '../core';
 
-import { useHttp } from '../core';
+import { useEventCallback } from '@react-devui/hooks';
 
 interface StandardListRes<T> {
   resources: T[];
@@ -12,9 +12,7 @@ interface StandardListRes<T> {
   };
 }
 
-export function useAPI(url: string) {
-  const http = useHttp();
-
+export function useAPI(http: ReturnType<typeof useHttp>, url: string) {
   return {
     list: useEventCallback(<T = any, P = any>(params?: P) =>
       http<StandardListRes<T>>({

packages/platform/src/app/routes/list/standard-table/DeviceModal.tsx

@@ -5,11 +5,12 @@ import type { DSelectItem } from '@react-devui/ui/components/select';
 import { isUndefined } from 'lodash';
 import React, { useImperativeHandle, useState } from 'react';
 
-import { useAsync, useEventCallback } from '@react-devui/hooks';
+import { useEventCallback } from '@react-devui/hooks';
 import { FormControl, FormGroup, useForm, Validators } from '@react-devui/ui';
 import { DForm, DInput, DModal, DSelect } from '@react-devui/ui';
 
 import { AppResponsiveForm } from '../../../components';
+import { useHttp } from '../../../core';
 import { useAPI } from '../../../hooks';
 
 export interface AppDeviceModalProps {
@@ -19,8 +20,10 @@ export interface AppDeviceModalProps {
 function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSettingFn<DeviceData>>): JSX.Element | null {
   const { onSuccess } = props;
 
-  const modelApi = useAPI('/device/model');
-  const async = useAsync();
+  const http = useHttp();
+  const httpOfInit = useHttp();
+  const modelApi = useAPI(http, '/device/model');
+  const modelApiOfInit = useAPI(httpOfInit, '/device/model');
 
   const [visible, setVisible] = useState(false);
   const [device, setDevice] = useState<DeviceData>();
@@ -42,7 +45,7 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
     updateForm();
 
     setModelList(undefined);
-    modelApi.list().subscribe({
+    modelApiOfInit.list().subscribe({
       next: (res) => {
         setModelList(
           res.resources.map((model) => ({
@@ -70,16 +73,19 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
           dOkProps={{ disabled: !form.valid }}
           onOkClick={() =>
             new Promise((r) => {
-              async.setTimeout(() => {
-                onSuccess();
-                r(true);
-              }, 500);
+              modelApi.list().subscribe({
+                next: () => {
+                  onSuccess();
+                  r(true);
+                },
+              });
             })
           }
         ></DModal.Footer>
       }
       dMaskClosable={false}
       onClose={() => {
+        httpOfInit.abortAll();
         setVisible(false);
       }}
     >

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -6,11 +6,12 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { useAsync, useImmer, useMount } from '@react-devui/hooks';
+import { useImmer, useMount } from '@react-devui/hooks';
 import { DownOutlined, PlusOutlined } from '@react-devui/icons';
 import { DButton, DCard, DCheckbox, DDropdown, DModal, DPagination, DSelect, DSeparator, DSpinner, DTable } from '@react-devui/ui';
 
 import { AppRouteHeader, AppStatusDot, AppTableFilter } from '../../../components';
+import { useHttp } from '../../../core';
 import { useAPI, useQueryParams } from '../../../hooks';
 import { AppRoute } from '../../../utils';
 import { AppDeviceModal } from './DeviceModal';
@@ -31,9 +32,9 @@ export default AppRoute(() => {
   const deviceModalRef = useRef<OpenSettingFn<DeviceData>>(null);
 
   const { t } = useTranslation();
-  const async = useAsync();
-  const modelApi = useAPI('/device/model');
-  const deviceApi = useAPI('/device');
+  const http = useHttp();
+  const modelApi = useAPI(http, '/device/model');
+  const deviceApi = useAPI(http, '/device');
 
   const [deviceQuerySaved, setDeviceQuerySaved] = useQueryParams<DeviceQueryParams>({
     keyword: '',
@@ -126,9 +127,11 @@ export default AppRoute(() => {
             <DModal.Footer
               onOkClick={() =>
                 new Promise((r) => {
-                  async.setTimeout(() => {
-                    r(true);
-                  }, 500);
+                  modelApi.list().subscribe({
+                    next: () => {
+                      r(true);
+                    },
+                  });
                 })
               }
             />

packages/platform/src/app/routes/list/standard-table/detail/Detail.tsx

@@ -10,6 +10,7 @@ import { EditOutlined } from '@react-devui/icons';
 import { DButton, DCard, DSeparator, DSpinner, DTable } from '@react-devui/ui';
 
 import { AppDetailView, AppRouteHeader } from '../../../../components';
+import { useHttp } from '../../../../core';
 import { useAPI } from '../../../../hooks';
 import { AppRoute } from '../../../../utils';
 import { AppDeviceModal } from '../DeviceModal';
@@ -20,7 +21,8 @@ export default AppRoute(() => {
 
   const { t } = useTranslation();
 
-  const deviceApi = useAPI('/device');
+  const http = useHttp();
+  const deviceApi = useAPI(http, '/device');
 
   const { id: _id } = useParams();
   const id = Number(_id!);