优化发送请求和上传文件的dom操作

houtai/src/components/AsyncSpinLoding/index.module.scss

@@ -19,8 +19,3 @@
     }
   }
 }
-
-.AsyncSpinLodingShow {
-  opacity: 1;
-  pointer-events: auto;
-}

houtai/src/components/AsyncSpinLoding/index.tsx

@@ -1,24 +1,10 @@
 import styles from "./index.module.scss";
 import { Spin } from "antd";
 import React from "react";
-import classNames from "classnames";
-import { useSelector } from "react-redux";
-import { RootState } from "@/store";
 
 function AsyncSpinLoding() {
-  // 从仓库中获取发送请求--加载状态--请求成功--关闭加载
-  const asyncLoding = useSelector(
-    (state: RootState) => state.loginStore.asyncLoding
-  );
-
   return (
-    <div
-      id="AsyncSpinLoding"
-      className={classNames(
-        styles.AsyncSpinLoding,
-        asyncLoding ? styles.AsyncSpinLodingShow : ""
-      )}
-    >
+    <div id="AsyncSpinLoding" className={styles.AsyncSpinLoding}>
       <Spin size="large" />
     </div>
   );

houtai/src/components/NotFound/index.tsx

@@ -6,8 +6,8 @@ export default function NotFound() {
 
   useEffect(() => {
     timeRef.current = window.setTimeout(() => {
-      const dom: any = document.querySelector(".noFindPage");
-      dom.style.opacity = 1;
+      const dom: HTMLDivElement = document.querySelector(".noFindPage")!;
+      dom.style.opacity = "1";
     }, 300);
     return () => {
       clearTimeout(timeRef.current);

houtai/src/pages/B2Goods/GoodsAdd/index.tsx

@@ -37,6 +37,7 @@ import {
 } from "@/store/action/B2Goods";
 import { baseURL } from "@/utils/http";
 import { FileListType, GoodsTableType } from "@/types";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
 
 type Props = {
   id: number;
@@ -45,10 +46,6 @@ type Props = {
   editListFu: () => void;
 };
 
-// 上传附件的进度条
-const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-const progressDom: any = document.querySelector("#progress");
-
 function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
   // 后面添加的的知识驿站
   const [valueZS1, setValueZS1] = useState("");
@@ -146,10 +143,8 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
           MessageFu.success("上传成功!");
           setCover(res.data.filePath);
         }
-        UpAsyncLodingDom.style.opacity = 0;
-        UpAsyncLodingDom.style.pointerEvents = "none";
-
-        progressDom.style.width = "0%";
+        domShowFu("#UpAsyncLoding", false);
+        progressDomFu("0%");
       }
     },
     [dirCode]
@@ -280,9 +275,8 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
             setFileList({ ...fileList, img: [res.data, ...fileList.img] });
           else setFileList({ ...fileList, [fileOneType]: res.data });
         }
-        UpAsyncLodingDom.style.opacity = 0;
-        UpAsyncLodingDom.style.pointerEvents = "none";
-        progressDom.style.width = "0%";
+        domShowFu("#UpAsyncLoding", false);
+        progressDomFu("0%");
       }
     },
     [dirCode, fileList, fileOneType]

houtai/src/pages/B3Wall/WallAdd/index.tsx

@@ -13,15 +13,12 @@ import {
   goodsUploadAPI,
   setWallSave,
 } from "@/store/action/B3Wall";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
 type Props = {
   id: number;
   closeMoalFu: (txt: string) => void;
 };
 
-// 上传附件的进度条
-const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-const progressDom: any = document.querySelector("#progress");
-
 function WallAdd({ id, closeMoalFu }: Props) {
   const getInfoFu = useCallback(async (id: number) => {
     const res = await getWallDetailAPI(id);
@@ -131,9 +128,8 @@ function WallAdd({ id, closeMoalFu }: Props) {
           setImgList([res.data, ...imgList]);
           imgListRef.current.unshift(res.data);
         }
-        UpAsyncLodingDom.style.opacity = 0;
-        UpAsyncLodingDom.style.pointerEvents = "none";
-        progressDom.style.width = "0%";
+        domShowFu("#UpAsyncLoding", false);
+        progressDomFu("0%");
       }
     },
     [imgList]

houtai/src/store/action/B2Goods.ts

@@ -1,4 +1,5 @@
 import { DownImgType, GoodsTableType } from "@/types";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
 import http from "@/utils/http";
 import axios from "axios";
 import store, { AppDispatch } from "..";
@@ -50,24 +51,19 @@ export const goodsRemoveAPI = (id: number) => {
   return http.get(`cms/goods/remove/${id}`);
 };
 
-// 上传附件的进度条
-const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-const progressDom: any = document.querySelector("#progress");
-
 const CancelToken = axios.CancelToken;
 /**
  * 上传封面图和附件
  */
 export const goodsUploadAPI = (data: any) => {
-  UpAsyncLodingDom.style.opacity = 1;
-  UpAsyncLodingDom.style.pointerEvents = "auto";
+  domShowFu("#UpAsyncLoding", true);
 
   return http.post("cms/goods/upload", data, {
     timeout: 50000,
     // 显示进度条
     onUploadProgress: (e: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;
-      progressDom.style.width = complete + "%";
+      progressDomFu(complete + "%");
     },
     // 取消上传
     cancelToken: new CancelToken(function executor(c) {

houtai/src/store/action/B3Wall.ts

@@ -1,4 +1,5 @@
 import { WallSaveAPIType } from "@/types";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
 import http from "@/utils/http";
 import axios from "axios";
 import store, { AppDispatch } from "..";
@@ -55,24 +56,19 @@ export const setWallSave = (data: WallSaveAPIType) => {
   return http.post("cms/wall/save", data);
 };
 
-// 上传附件的进度条
-const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-const progressDom: any = document.querySelector("#progress");
-
 const CancelToken = axios.CancelToken;
 /**
  * 上传封面图和附件
  */
 export const goodsUploadAPI = (data: any) => {
-  UpAsyncLodingDom.style.opacity = 1;
-  UpAsyncLodingDom.style.pointerEvents = "auto";
+  domShowFu("#UpAsyncLoding", true);
 
   return http.post("cms/wall/upload", data, {
     timeout: 50000,
     // 显示进度条
     onUploadProgress: (e: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;
-      progressDom.style.width = complete + "%";
+      progressDomFu(complete + "%");
     },
     // 取消上传
     cancelToken: new CancelToken(function executor(c) {

houtai/src/store/reducer/login.ts

@@ -8,8 +8,6 @@ const initState = {
     url: "",
     show: false,
   },
-  // 加载请求的loding
-  asyncLoding: false,
   // 视频的src
   videoSrc: "",
   // 所有的下拉框数据
@@ -37,7 +35,6 @@ const initState = {
 // 定义 action 类型
 type LoginActionType =
   | { type: "login/lookBigImg"; payload: { url: string; show: boolean } }
-  | { type: "login/asyncLoding"; payload: boolean }
   | { type: "login/lookVideo"; payload: string }
   | { type: "login/getDictList"; payload: DictListTypeObj }
   | { type: "login/setAuthPageArr"; payload: PermissionsAPIType[] }
@@ -59,9 +56,6 @@ export default function loginReducer(
     // 所有图片点击预览查看大图
     case "login/lookBigImg":
       return { ...state, lookBigImg: action.payload };
-    // 加载请求的loding
-    case "login/asyncLoding":
-      return { ...state, asyncLoding: action.payload };
     // 查看视频
     case "login/lookVideo":
       return { ...state, videoSrc: action.payload };

houtai/src/utils/domShow.ts

@@ -1 +1,18 @@
-export const a = () => {};
+// 加载和上传的盒子的显示隐藏
+export const domShowFu = (ele: string, val: boolean) => {
+  const dom: HTMLDivElement = document.querySelector(ele)!;
+  if (val) {
+    dom.style.opacity = "1";
+    dom.style.pointerEvents = "auto";
+  } else {
+    dom.style.opacity = "0";
+    dom.style.pointerEvents = "none";
+  }
+};
+
+// 上传附件的进度条
+let progressDom: HTMLDivElement = document.querySelector("#progress")!;
+export const progressDomFu = (val: string) => {
+  if (!progressDom) progressDom = document.querySelector("#progress")!;
+  progressDom.style.width = val;
+};

houtai/src/utils/http.ts

@@ -3,6 +3,7 @@ import history from "./history";
 import { getTokenInfo, removeTokenInfo } from "./storage";
 import store from "@/store";
 import { MessageFu } from "./message";
+import { domShowFu, progressDomFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
@@ -35,8 +36,7 @@ let axajInd = 0;
 http.interceptors.request.use(
   function (config: any) {
     // 发请求前打开加载提示
-    if (!store.getState().loginStore.asyncLoding)
-      store.dispatch({ type: "login/asyncLoding", payload: true });
+    domShowFu("#AsyncSpinLoding", true);
 
     axajInd++;
 
@@ -57,8 +57,7 @@ http.interceptors.response.use(
     // 请求回来的关闭加载提示
     axajInd--;
     if (axajInd === 0) {
-      if (store.getState().loginStore.asyncLoding)
-        store.dispatch({ type: "login/asyncLoding", payload: false });
+      domShowFu("#AsyncSpinLoding", false);
     }
     if (response.data.code === 5001 || response.data.code === 5002) {
       clearTimeout(timeId);
@@ -76,26 +75,20 @@ http.interceptors.response.use(
   },
   async function (err) {
     axajInd = 0;
-    if (store.getState().loginStore.asyncLoding)
-      store.dispatch({ type: "login/asyncLoding", payload: false });
-
-    // 上传附件的进度条
-    const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-    const progressDom: any = document.querySelector("#progress");
+    domShowFu("#AsyncSpinLoding", false);
 
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
       if (store.getState().loginStore.closeUpFile.state)
-        MessageFu.success("取消上传!");
+        MessageFu.warning("网络超时或中止上传!");
       else MessageFu.warning("网络繁忙，请稍后重试!");
     } else {
       MessageFu.warning("错误!");
     }
 
     // 响应错误也要取消 上传文件的进度条
-    UpAsyncLodingDom.style.opacity = 0;
-    UpAsyncLodingDom.style.pointerEvents = "none";
-    progressDom.style.width = "0%";
+    domShowFu("#UpAsyncLoding", false);
+    progressDomFu("0%");
 
     return Promise.reject(err);
   }