diff --git a/package.json b/package.json index 8a09873..81b07d8 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dfbf289..078b737 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,7 @@ specifiers: '@types/react-lazy-load-image-component': ^1.5.2 '@vitejs/plugin-legacy': ^3.0.1 '@vitejs/plugin-react-swc': ^3.0.0 + axios: ^1.2.3 dayjs: ^1.11.7 imagesloaded: ^5.0.0 intersection-observer: ^0.12.2 @@ -42,7 +43,6 @@ specifiers: typescript: ^4.9.3 vite: 4.0.3 vite-plugin-compression: ^0.5.1 - whatwg-fetch: ^3.6.2 dependencies: '@dnd-kit/core': 6.0.7_biqbaboplfbrettd7655fr4n2y @@ -55,6 +55,7 @@ dependencies: '@mui/lab': 5.0.0-alpha.114_k43z3ghfbkgbsmpaivfebys3bq '@mui/material': 5.11.3_lskpmcsdi7ipu6qpuapyu56ihm '@reduxjs/toolkit': 1.9.1_k4ae6lp43ej6mezo3ztvx6pykq + axios: 1.2.3 dayjs: 1.11.7 imagesloaded: 5.0.0 intersection-observer: 0.12.2 @@ -71,7 +72,6 @@ dependencies: react-redux: 8.0.5_ie75ejlwqy5zh3tldgt7pftwcu react-router-dom: 6.6.1_biqbaboplfbrettd7655fr4n2y react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y - whatwg-fetch: 3.6.2 devDependencies: '@babel/core': 7.20.7 @@ -1294,11 +1294,25 @@ packages: dependencies: color-convert: 2.0.1 + /asynckit/0.4.0: + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + dev: false + /at-least-node/1.0.0: resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} engines: {node: '>= 4.0.0'} dev: false + /axios/1.2.3: + resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==} + dependencies: + follow-redirects: 1.15.2 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: false + /babel-plugin-macros/3.1.0: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} @@ -1398,6 +1412,13 @@ packages: /color-name/1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + /combined-stream/1.0.8: + resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} + engines: {node: '>= 0.8'} + dependencies: + delayed-stream: 1.0.0 + dev: false + /commander/2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} dev: true @@ -1497,6 +1518,11 @@ packages: engines: {node: '>=8'} dev: true + /delayed-stream/1.0.0: + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} + engines: {node: '>=0.4.0'} + dev: false + /dom-helpers/5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: @@ -1619,6 +1645,25 @@ packages: rematrix: 0.2.2 dev: false + /follow-redirects/1.15.2: + resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + + /form-data/4.0.0: + resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} + engines: {node: '>= 6'} + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + dev: false + /fs-extra/10.1.0: resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} engines: {node: '>=12'} @@ -1930,6 +1975,18 @@ packages: picomatch: 2.3.1 dev: false + /mime-db/1.52.0: + resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} + engines: {node: '>= 0.6'} + dev: false + + /mime-types/2.1.35: + resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} + engines: {node: '>= 0.6'} + dependencies: + mime-db: 1.52.0 + dev: false + /mime/1.6.0: resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} engines: {node: '>=4'} @@ -2135,6 +2192,10 @@ packages: react-is: 16.13.1 dev: false + /proxy-from-env/1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + dev: false + /prr/1.0.1: resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} dev: true @@ -2667,10 +2728,6 @@ packages: fsevents: 2.3.2 dev: true - /whatwg-fetch/3.6.2: - resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==} - dev: false - /which/1.3.1: resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==} hasBin: true diff --git a/src/main.tsx b/src/main.tsx index 58e1f6d..838daac 100644 --- a/src/main.tsx +++ b/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([ diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx index 088d2d4..a543f38 100644 --- a/src/routers/video/index.tsx +++ b/src/routers/video/index.tsx @@ -5,6 +5,7 @@ import { VideoRouterMasonryType } from "./videotype"; type ValueOf = T[keyof T]; export default function VideoPage() { + //处理搜索条件 const activeTags = useAppSelector(selectActiveTags), tname = activeTags.find((item) => item.queryType === "tname") ?.queryString as ValueOf>, diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx index 803bb8d..93e45f9 100644 --- a/src/routers/video/masonry.tsx +++ b/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 该组件负责渲染视频图片的瀑布流 */ diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts index 12c1f43..f69a641 100644 --- a/src/routers/video/tools.ts +++ b/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"); diff --git a/src/utils/fetch/fetchtype.ts b/src/utils/fetch/fetchtype.ts index f58fd6c..90afbe4 100644 --- a/src/utils/fetch/fetchtype.ts +++ b/src/utils/fetch/fetchtype.ts @@ -172,7 +172,7 @@ export interface RFetchVideoRes { /** * @example 0 */ - code: 0 | 400; + code: 0 | 400 | 500; /** * @example "ok" */ diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts index 0353ca8..27d0582 100644 --- a/src/utils/fetch/index.ts +++ b/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 { - const fetchUrl = `${Host_Url}/v1/video-interface/advanced-search?order=${ - params.order || "score" - }&page=${params.page}${ - params.copyright ? `©right=${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); }