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

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

@@ -38,7 +38,7 @@ import {
 } from "@/store/action/B2Goods";
 import { baseURL } from "@/utils/http";
 import { FileListType, GoodsTableType } from "@/types";
-import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { fileDomInitialFu } from "@/utils/domShow";
 import { CheckboxValueType } from "antd/es/checkbox/Group";
 
 type Props = {
@@ -155,13 +155,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]
@@ -284,16 +287,19 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
 
         e.target.value = "";
 
-        const res: any = await goodsUploadAPI(fd);
+        const res = await goodsUploadAPI(fd);
 
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          if (fileOneType === "img")
-            setFileList({ ...fileList, img: [res.data, ...fileList.img] });
-          else setFileList({ ...fileList, [fileOneType]: res.data });
+        try {
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            if (fileOneType === "img")
+              setFileList({ ...fileList, img: [res.data, ...fileList.img] });
+            else setFileList({ ...fileList, [fileOneType]: res.data });
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [dirCode, fileList, fileOneType]

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

@@ -10,10 +10,10 @@ import { ImgListType, WallSaveAPIType } from "@/types";
 import WallLook from "../WallLook";
 import {
   getWallDetailAPI,
-  goodsUploadAPI,
+  wallUploadAPI,
   setWallSave,
 } from "@/store/action/B3Wall";
-import { domShowFu, progressDomFu } from "@/utils/domShow";
+import { fileDomInitialFu } from "@/utils/domShow";
 type Props = {
   id: number;
   closeMoalFu: (txt: string) => void;
@@ -122,14 +122,17 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
         e.target.value = "";
 
-        const res: any = await goodsUploadAPI(fd);
-        if (res.code === 0) {
-          MessageFu.success("上传成功!");
-          setImgList([res.data, ...imgList]);
-          imgListRef.current.unshift(res.data);
+        try {
+          const res = await wallUploadAPI(fd);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setImgList([res.data, ...imgList]);
+            imgListRef.current.unshift(res.data);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
         }
-        domShowFu("#UpAsyncLoding", false);
-        progressDomFu("0%");
       }
     },
     [imgList]

houtai/src/store/action/B2Goods.ts

@@ -61,7 +61,7 @@ export const goodsUploadAPI = (data: any) => {
   domShowFu("#UpAsyncLoding", true);
 
   return http.post("cms/goods/upload", data, {
-    timeout: 50000,
+    timeout: 0,
     // 显示进度条
     onUploadProgress: (e: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;

houtai/src/store/action/B3Wall.ts

@@ -60,11 +60,11 @@ const CancelToken = axios.CancelToken;
 /**
  * 上传封面图和附件
  */
-export const goodsUploadAPI = (data: any) => {
+export const wallUploadAPI = (data: any) => {
   domShowFu("#UpAsyncLoding", true);
 
   return http.post("cms/wall/upload", data, {
-    timeout: 50000,
+    timeout: 0,
     // 显示进度条
     onUploadProgress: (e: any) => {
       const complete = (e.loaded / e.total) * 100 || 0;

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().loginStore.closeUpFile.state)
+      store.dispatch({
+        type: "login/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().loginStore.closeUpFile.state)
-      store.dispatch({
-        type: "login/closeUpFile",
-        payload: { fu: () => {}, state: false },
-      });
-
     return response.data;
   },
   async function (err) {
@@ -87,22 +80,11 @@ http.interceptors.response.use(
       // 如果因为网络原因，response没有，给提示消息
       if (!err.response) {
         if (store.getState().loginStore.closeUpFile.state)
-          MessageFu.warning("网络超时或中止上传!");
+          MessageFu.warning("取消上传!");
         else MessageFu.error("网络繁忙，请稍后重试!");
       } else MessageFu.error("响应错误，请联系管理员!");
-
-      // 上传失败之后更改  取消上传 的状态
-      if (store.getState().loginStore.closeUpFile.state)
-        store.dispatch({
-          type: "login/closeUpFile",
-          payload: { fu: () => {}, state: false },
-        });
     }, 100);
 
-    // 响应错误也要取消 上传文件的进度条
-    domShowFu("#UpAsyncLoding", false);
-    progressDomFu("0%");
-
     return Promise.reject(err);
   }
 );