项目初始化02

package-lock.json

@@ -22,7 +22,7 @@
         "@types/node": "^16.11.33",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.3",
-        "ahooks": "^3.3.10",
+        "ahooks": "^3.3.12",
         "axios": "^0.27.2",
         "babel-jest": "^27.4.2",
         "babel-loader": "^8.2.3",
@@ -4731,9 +4731,9 @@
       }
     },
     "node_modules/ahooks": {
-      "version": "3.3.10",
-      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.3.10.tgz",
-      "integrity": "sha512-CNZQRnNkvbafV5qdGcx7AT81XJNPa7vAo1XoShvdI8s6oHigTrmc+kWkyWWEywiEchF992Z6oIQEXkSsL034fw==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.3.12.tgz",
+      "integrity": "sha512-SrsANUKn7lD11KwJo5YzrGRxQaPe21hvKkrvqB0/JtcJGo2RKl5WvtGjVf5WgpaPaPp1Lw7p5AJssmFO8IS2bw==",
       "dependencies": {
         "@types/js-cookie": "^2.x.x",
         "ahooks-v3-count": "^1.0.0",
@@ -20147,9 +20147,9 @@
       }
     },
     "ahooks": {
-      "version": "3.3.10",
-      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.3.10.tgz",
-      "integrity": "sha512-CNZQRnNkvbafV5qdGcx7AT81XJNPa7vAo1XoShvdI8s6oHigTrmc+kWkyWWEywiEchF992Z6oIQEXkSsL034fw==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.3.12.tgz",
+      "integrity": "sha512-SrsANUKn7lD11KwJo5YzrGRxQaPe21hvKkrvqB0/JtcJGo2RKl5WvtGjVf5WgpaPaPp1Lw7p5AJssmFO8IS2bw==",
       "requires": {
         "@types/js-cookie": "^2.x.x",
         "ahooks-v3-count": "^1.0.0",

package.json

@@ -17,6 +17,7 @@
     "@types/node": "^16.11.33",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
+    "ahooks": "^3.3.12",
     "axios": "^0.27.2",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",

src/components/MyRouter/MyRouter.tsx

-import React, { ReactNode, useCallback, useEffect, Suspense } from "react";
+import React, { ReactNode, useCallback, Suspense } from "react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-import { route, navigate, operation, elements } from "@/router";
+import { route, navigate, operation } from "@/router";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store/index";
 import Loading from "@/views/Loading";
-import { current, menu } from "@/api/demo_api";
-import localStorageKey from "@/utils/localStorageKey";
+import useMyRouter from "./useMyRouter";
 
 const MyRouter: React.FC<{}> = observer(() => {
-  const { permissionStore, menuStore } = useStores();
+  const { permissionStore } = useStores();
 
-  useEffect(() => {
-    current().then((res) => {
-      localStorage.setItem(localStorageKey.USER_INFO, JSON.stringify(res));
-      menu().then((res) => {
-        permissionStore.restAddRoutes();
-        for (let item of res.data) {
-          for (let route of item.routes) {
-            route.element = elements[route.element];
-            route.path = `/product/${item.id}${route.path}`;
-          }
-          permissionStore.setAddRoutes(item.routes);
-        }
-        menuStore.initMenu(res.data);
-        permissionStore.initAllRoutes();
-      });
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useMyRouter();
 
   const setRoutes = useCallback(
     (routes: Array<route | navigate | operation>): ReactNode => {

src/components/MyRouter/useMyRouter.ts

+import { useStores } from "@/store/index";
+import { elements } from "@/router";
+import { current, menu } from "@/api/demo_api";
+import localStorageKey from "@/utils/localStorageKey";
+import NotFound from "@/views/404";
+import useMyRequest from "@/hooks/useMyRequest";
+import { useEffect } from "react";
+
+const useMyRouter = () => {
+  const { permissionStore, menuStore } = useStores();
+  const userInfo = useMyRequest(current);
+  const menuInfo = useMyRequest(menu);
+
+  useEffect(() => {
+    userInfo.run();
+    menuInfo.run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (userInfo.res && menuInfo.res) {
+      localStorage.setItem(localStorageKey.TOKEN, JSON.stringify(userInfo.res));
+
+      permissionStore.restAddRoutes();
+      for (let item of menuInfo.res.data) {
+        for (let route of item.routes) {
+          route.element = elements[route.element] || NotFound;
+          route.path = `/product/${item.id}${route.path}`;
+        }
+        permissionStore.setAddRoutes(item.routes);
+      }
+      menuStore.initMenu(menuInfo.res.data);
+      permissionStore.initAllRoutes();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInfo.data, menuInfo.data]);
+};
+
+export default useMyRouter;

src/hooks/useMyRequest.ts

+import { useRequest } from "ahooks";
+import { useEffect } from "react";
+import { useMessage } from "@/components/MySnackbar";
+
+interface CachedData<TData, TParams> {
+  data: TData;
+  params: TParams;
+  time: number;
+}
+
+const defaultOptions = {
+  manual: true,
+  pollingWhenHidden: false,
+  throttleWait: 1000,
+};
+
+const useMyRequest = <TData, TParams>(
+  api: (...args: TParams[]) => Promise<TData>,
+  options?: {
+    manual?: boolean;
+    defaultParams?: TParams[];
+    onBefore?: (params: TParams[]) => void;
+    onSuccess?: (data: TData, params: TParams[]) => void;
+    onError?: (e: Error, params: TParams[]) => void;
+    onFinally?: (params: TParams[], data?: TData, e?: Error) => void;
+    loadingDelay?: number;
+    pollingInterval?: number;
+    pollingWhenHidden?: boolean;
+    ready?: boolean;
+    refreshDeps?: any[];
+    refreshOnWindowFocus?: boolean;
+    focusTimespan?: number;
+    debounceWait?: number;
+    debounceLeading?: boolean;
+    debounceTrailing?: boolean;
+    debounceMaxWait?: number;
+    throttleWait?: number;
+    throttleLeading?: boolean;
+    throttleTrailing?: boolean;
+    cacheKey?: string;
+    cacheTime?: number;
+    staleTime?: number;
+    setCache?: (data: CachedData<TData, TParams[]>) => void;
+    getCache?: (params: TParams[]) => CachedData<TData, TParams[]>;
+    retryCount?: number;
+    retryInterval?: number;
+    readyText?: string;
+  }
+) => {
+  const Message = useMessage();
+
+  const request = useRequest(api, {
+    ...defaultOptions,
+    onSuccess: () => {},
+    onError: (data) => {
+      Message.error(data.message);
+    },
+    ...options,
+  });
+
+  useEffect(() => {
+    if (request.loading && options?.readyText) {
+      Message.success(options.readyText);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [request.loading]);
+
+  return { ...request, res: request.data };
+};
+
+export default useMyRequest;

yarn.lock

@@ -2522,10 +2522,10 @@
   "resolved" "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz"
   "version" "1.0.0"
 
-"ahooks@^3.3.10":
-  "integrity" "sha512-CNZQRnNkvbafV5qdGcx7AT81XJNPa7vAo1XoShvdI8s6oHigTrmc+kWkyWWEywiEchF992Z6oIQEXkSsL034fw=="
-  "resolved" "https://registry.npmjs.org/ahooks/-/ahooks-3.3.10.tgz"
-  "version" "3.3.10"
+"ahooks@^3.3.12":
+  "integrity" "sha512-SrsANUKn7lD11KwJo5YzrGRxQaPe21hvKkrvqB0/JtcJGo2RKl5WvtGjVf5WgpaPaPp1Lw7p5AJssmFO8IS2bw=="
+  "resolved" "https://registry.npmjs.org/ahooks/-/ahooks-3.3.12.tgz"
+  "version" "3.3.12"
   dependencies:
     "@types/js-cookie" "^2.x.x"
     "ahooks-v3-count" "^1.0.0"