替换fetch为axios

package.json

@@ -20,6 +20,7 @@
     "@mui/lab": "5.0.0-alpha.114",
     "@mui/material": "^5.11.3",
     "@reduxjs/toolkit": "^1.9.1",
+    "axios": "^1.2.3",
     "dayjs": "^1.11.7",
     "imagesloaded": "^5.0.0",
     "intersection-observer": "^0.12.2",
@@ -35,8 +36,7 @@
     "react-photo-view": "^1.2.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",
-    "react-use": "^17.4.0",
-    "whatwg-fetch": "^3.6.2"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@babel/core": ">=7.0.0 <8.0.0",

src/main.tsx

@@ -15,7 +15,6 @@ import store from "@store/index";
 import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
-import "whatwg-fetch";
 import "./index.less";
 
 const router = createBrowserRouter([

src/routers/video/index.tsx

@@ -5,6 +5,7 @@ import { VideoRouterMasonryType } from "./videotype";
 
 type ValueOf<T> = T[keyof T];
 export default function VideoPage() {
+  //处理搜索条件
   const activeTags = useAppSelector(selectActiveTags),
     tname = activeTags.find((item) => item.queryType === "tname")
       ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "tname">>,

src/routers/video/masonry.tsx

@@ -8,10 +8,7 @@ import { nanoid } from "nanoid";
 import styles from "./video.module.less";
 import { fetchVideohnadler, PickVideoRouterImageCardType } from "./tools";
 import { useAppSelector, useAppDispatch } from "@store/hooks";
-import {
-  changeLoading,
-  selectVideoLoadingState,
-} from "../../store/loading/index";
+import { changeLoading, selectVideoLoadingState } from "@store/loading/index";
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */

src/routers/video/tools.ts

@@ -12,8 +12,10 @@ export const fetchVideohnadler = async (
     ...props,
     page,
   });
-  if (res.code === 400) {
-    message.info("参数错误,请尝试其他tag");
+
+  if (res.code !== 0) {
+    res.code === 400 && message.info("参数错误,请尝试其他tag");
+    res.code === 500 && message.info(res.message);
     return [];
   } else if (res.data.result.length < 1) {
     message.info("没有更多数据了,请尝试其他tag");

src/utils/fetch/fetchtype.ts

@@ -172,7 +172,7 @@ export interface RFetchVideoRes {
   /**
    * @example 0
    */
-  code: 0 | 400;
+  code: 0 | 400 | 500;
   /**
    * @example "ok"
    */

src/utils/fetch/index.ts

@@ -1,27 +1,54 @@
+import axios from "axios";
 /**
  * 类型文件导入
  */
 import { IFetchVideoParams, RFetchVideoRes } from "./fetchtype";
 import { Host_Url } from "./tool";
 
+export const BackEndAxios = axios.create({
+  baseURL: Host_Url,
+  timeout: 2500,
+});
+/**
+ * 后端接口配置
+ */
+BackEndAxios.interceptors.request.use((config) => {
+  //添加请求凭证
+  config.params = {
+    ...config.params,
+    "subscription-key": "3cc4284fbb864965a7a9ad0f28af8496",
+  };
+  return config;
+});
+
 /**
  * video视频数据获取接口
  */
-export function fetchVideos(
+export async function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
-  const fetchUrl = `${Host_Url}/v1/video-interface/advanced-search?order=${
-    params.order || "score"
-  }&page=${params.page}${
-    params.copyright ? `&copyright=${params.copyright}` : ""
+  try {
+    const res = await BackEndAxios.get("/v1/video-interface/advanced-search", {
+      params: {
+        order: params.order || "score",
+        page: params.page,
+        copyright: params.copyright,
+        q: params.q,
+        tname: params.tname,
+      },
+    });
+    return res.data;
+  } catch (e) {
+    // console.log({ e });
+    return {
+      code: 500,
+      message: "网络请求错误，您似乎处于断网状态",
+      ttl: 0,
+      data: {
+        page: 0,
+        numResults: 0,
+        result: [],
+      },
+    };
   }
-  ${params.q ? `&q=${params.q}` : ""}
-  ${
-    params.tname ? `&tname=${params.tname}` : ""
-  }&subscription-key=3cc4284fbb864965a7a9ad0f28af8496`
-    .replace(/\s+/g, "")
-    .trim();
-  return fetch(fetchUrl, {
-    method: "GET",
-  }).then((response) => response.json() as Promise<RFetchVideoRes>);
 }