优化上传接口和通用axios拦截器逻辑

houtai/src/pages/A2News/NewsAdd/index.tsx

@@ -3,7 +3,7 @@ import {
   newSaveAPI,
   newsUploadAPI,
 } from "@/store/action/A2News";
-import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { fileDomInitialFu } from "@/utils/domShow";
 import { MessageFu } from "@/utils/message";
 import {
   Button,
@@ -148,15 +148,18 @@ function NewsAdd({
 
         e.target.value = "";
 
-        const res = await newsUploadAPI(fd);
-
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          if (tableType === "news") setImgList([...imgList, res.data]);
-          else setFileOne(res.data);
+        try {
+          const res = await newsUploadAPI(fd);
+
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            if (tableType === "news") setImgList([...imgList, res.data]);
+            else setFileOne(res.data);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [dirCode, imgList, tableType]

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

@@ -1,5 +1,13 @@
 import store, { RootState } from "@/store";
-import { Button, Checkbox, Form, FormInstance, Input, Popconfirm, Select } from "antd";
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormInstance,
+  Input,
+  Popconfirm,
+  Select,
+} from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -27,7 +35,7 @@ import {
 } from "@/store/action/A3Goods";
 import { baseURL } from "@/utils/http";
 import { FileListType, GoodsTableType } from "@/types";
-import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { fileDomInitialFu } from "@/utils/domShow";
 
 type Props = {
   id: number;
@@ -120,13 +128,16 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
 
         e.target.value = "";
 
-        const res: any = await goodsUploadAPI(fd);
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          setCover(res.data.filePath);
+        try {
+          const res = await goodsUploadAPI(fd);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setCover(res.data.filePath);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [dirCode]
@@ -229,16 +240,19 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
 
         e.target.value = "";
 
-        const res: any = await goodsUploadAPI(fd);
+        try {
+          const res = await goodsUploadAPI(fd);
 
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          if (fileOneType === "img")
-            setFileList({ ...fileList, img: [...fileList.img, res.data] });
-          else setFileList({ ...fileList, [fileOneType]: res.data });
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            if (fileOneType === "img")
+              setFileList({ ...fileList, img: [...fileList.img, res.data] });
+            else setFileList({ ...fileList, [fileOneType]: res.data });
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [dirCode, fileList, fileOneType]

houtai/src/pages/A4Venue/VenueEdit/index.tsx

@@ -4,7 +4,7 @@ import {
   venueUploadAPI,
 } from "@/store/action/A4Venue";
 import { ImgListType, VenueTableType } from "@/types";
-import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { fileDomInitialFu } from "@/utils/domShow";
 import { MessageFu } from "@/utils/message";
 import { Button, Form, FormInstance, Input, Popconfirm } from "antd";
 import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
@@ -87,14 +87,17 @@ function VenueEdit({ id, closePageFu, editTableFu }: Props) {
 
         e.target.value = "";
 
-        const res: any = await venueUploadAPI(fd);
+        try {
+          const res = await venueUploadAPI(fd);
 
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          setImgList([...imgList, res.data]);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setImgList([...imgList, res.data]);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [dirCode, imgList]

houtai/src/utils/domShow.ts

@@ -1,3 +1,5 @@
+import store from "@/store";
+
 // 加载和上传的盒子的显示隐藏
 export const domShowFu = (ele: string, val: boolean) => {
   const dom: HTMLDivElement = document.querySelector(ele)!;
@@ -16,3 +18,18 @@ export const progressDomFu = (val: string) => {
   if (!progressDom) progressDom = document.querySelector("#progress")!;
   progressDom.style.width = val;
 };
+
+// 上传附件的dom操作
+export const fileDomInitialFu = () => {
+  // 隐藏进度条的dom
+  domShowFu("#UpAsyncLoding", false);
+  progressDomFu("0%");
+  // 初始化 上传附件 的状态
+  setTimeout(() => {
+    if (store.getState().layoutStore.closeUpFile.state)
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: () => {}, state: false },
+      });
+  }, 200);
+};

houtai/src/utils/http.ts

@@ -3,7 +3,7 @@ import history from "./history";
 import { getTokenInfo, removeTokenInfo } from "./storage";
 import store from "@/store";
 import { MessageFu } from "./message";
-import { domShowFu, progressDomFu } from "./domShow";
+import { domShowFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
@@ -70,13 +70,6 @@ http.interceptors.response.use(
       // MessageFu.success(response.data.msg);
     } else MessageFu.warning(response.data.msg);
 
-    // 上传成功之后更改  取消上传 的状态
-    if (store.getState().layoutStore.closeUpFile.state)
-      store.dispatch({
-        type: "layout/closeUpFile",
-        payload: { fu: () => {}, state: false },
-      });
-
     return response.data;
   },
   async function (err) {
@@ -90,19 +83,8 @@ http.interceptors.response.use(
           MessageFu.warning("取消上传!");
         else MessageFu.error("网络繁忙，请稍后重试!");
       } else MessageFu.error("响应错误，请联系管理员!");
-
-      // 上传失败之后更改  取消上传 的状态
-      if (store.getState().layoutStore.closeUpFile.state)
-        store.dispatch({
-          type: "layout/closeUpFile",
-          payload: { fu: () => {}, state: false },
-        });
     }, 100);
 
-    // 响应错误也要取消 上传文件的进度条
-    domShowFu("#UpAsyncLoding", false);
-    progressDomFu("0%");
-
     return Promise.reject(err);
   }
 );