🏗️ refactor(custom): 用户点击多次tag栏之后将只会搜索最后一次结果

ISSUES CLOSED: #33

src/components/masonry/index.tsx

@@ -2,7 +2,7 @@ import { FC, useState, useEffect, useCallback } from "react";
 import { Masonry as Masonic_masonry } from "masonic";
 import Image from "@components/image";
 import { SingleRun, concurrencyRequest } from "@utils/index";
-import { fetchPhotos, fetchVideos } from "@utils/fetch";
+import { fetchPhotos } from "@utils/fetch";
 import { nanoid } from "nanoid";
 import { getImageSize } from "../image/tool";
 export default function Masonry() {

src/index.less

@@ -47,4 +47,8 @@
 body,
 html {
     font-family: 'Proxima Soft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    overflow-y: scroll;
 }

src/routers/layout/logo/index.tsx

@@ -126,18 +126,17 @@ const RouterListAndQA = () => {
   return (
     <div className='pl-2'>
       {RouterList.slice(0, 2).map((item) => (
-        <Button
-          key={item.label}
-          startIcon={item.startICon}
-          title={`前往${item.label}页`}
-          className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm ${
-            isActive(item.label) ? "bg-gray-300" : "bg-white"
-          }`}
-        >
-          <Link to={item.to} className=''>
+        <Link to={item.to} className='' key={item.label}>
+          <Button
+            startIcon={item.startICon}
+            title={`前往${item.label}页`}
+            className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm ${
+              isActive(item.label) ? "bg-gray-300" : "bg-white"
+            }`}
+          >
             {item.label}
-          </Link>
-        </Button>
+          </Button>
+        </Link>
       ))}
     </div>
   );

src/routers/layout/nav/index.tsx

@@ -230,9 +230,7 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
       <Chip
         onClick={handerclick}
         label={props.query}
-        className={`rounded px-3 py-1 border border-solid text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
-          loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
-        }`}
+        className={`rounded px-3 py-1 border border-solid text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 `}
         style={{
           color: styleColor,
           borderColor: clicked ? "currentcolor" : "transparent",
@@ -242,6 +240,13 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
   }
 );
 
+/**
+ * 
+${
+          loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
+        }
+ */
+
 const handleSetSpecialProps = (
   query: string,
   defaultColor: string,

src/utils/fetch/fetchtype.ts

@@ -171,7 +171,7 @@ type CustomFetchRes<T> = {
   /**
    * @example 0
    */
-  code: 0 | 400 | 500;
+  code: 0 | 400 | 500 | 403;
   /**
    * @example "ok"
    */

src/utils/fetch/index.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import JSONBigInt from "json-bigint";
 /**
  * 类型文件导入
@@ -37,14 +37,21 @@ BackEndAxios.interceptors.request.use((config) => {
   return config;
 });
 
+let VideoSource: AbortController | null = null;
+
 /**
  * video视频数据获取接口
  */
 export async function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
+  if (VideoSource) {
+    VideoSource.abort();
+  }
+  VideoSource = new AbortController();
   try {
     const res = await BackEndAxios.get("/video-interface/advanced-search", {
+      signal: VideoSource.signal,
       params: {
         order: params.order || "score",
         page: params.page,
@@ -53,9 +60,23 @@ export async function fetchVideos(
         tname: params.tname,
       },
     });
+    VideoSource = null;
     return res.data;
-  } catch (e) {
-    // console.log({ e });
+  } catch (err) {
+    if (axios.isAxiosError(err)) {
+      if (err.code === "ERR_CANCELED") {
+        return {
+          code: 403,
+          message: "已取消",
+          ttl: 0,
+          data: {
+            page: 0,
+            numResults: 0,
+            result: [],
+          },
+        };
+      }
+    }
     return {
       code: 500,
       message: "网络请求错误，您似乎处于断网状态",
@@ -68,19 +89,39 @@ export async function fetchVideos(
     };
   }
 }
+let PhotoSource: AbortController | null = null;
 /**
  * photo图片数据获取接口
  */
 export async function fetchPhotos(
   params: IFetchPhotoParams
 ): Promise<RFetchPhotoRes> {
-  // console.log({ params });
+  if (PhotoSource) {
+    PhotoSource.abort();
+  }
+  PhotoSource = new AbortController();
   try {
     const res = await BackEndAxios.get(`/pic/${params.type}`, {
+      signal: PhotoSource.signal,
       params: Omit(params, "type"),
     });
+    PhotoSource.abort();
     return res.data;
-  } catch (e) {
+  } catch (err) {
+    if (axios.isAxiosError(err)) {
+      if (err.code === "ERR_CANCELED") {
+        return {
+          code: 403,
+          message: "已取消",
+          ttl: 0,
+          data: {
+            page: 0,
+            total: 0,
+            result: [],
+          },
+        };
+      }
+    }
     return {
       code: 500,
       message: "网络请求错误，您似乎处于断网状态",