From 726773bc345f23c3e18ca69b5f96cd1a084d6486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A2=E4=BA=9A=E6=98=95?= <1549469775@qq.com> Date: Fri, 22 Nov 2024 10:45:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0axios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- pnpm-lock.yaml | 77 +++++++++++++++++++++++++++++++++++++++++++-- src/plugins/http/base.ts | 62 ++++++++++++++++++++++++++++++++++++ src/plugins/http/index.ts | 37 ++++++++++++++++++++++ src/plugins/http/plugins.ts | 0 src/plugins/http/utils.ts | 36 +++++++++++++++++++++ 6 files changed, 212 insertions(+), 3 deletions(-) create mode 100644 src/plugins/http/base.ts create mode 100644 src/plugins/http/index.ts create mode 100644 src/plugins/http/plugins.ts create mode 100644 src/plugins/http/utils.ts diff --git a/package.json b/package.json index 6152544..9d60913 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "resolutions": { - "styled-components": "^5" + "styled-components": "^6" }, "scripts": { "dev": "vite", @@ -18,6 +18,7 @@ "@blueprintjs/table": "^5.2.5", "@types/lodash": "^4.17.13", "@types/react-router-dom": "^5.3.3", + "axios": "^1.7.7", "framer-motion": "^11.11.17", "lodash": "^4.17.21", "normalize.css": "^8.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 50c74b3..caa1aa9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,7 +5,7 @@ settings: excludeLinksFromLockfile: false overrides: - styled-components: ^5 + styled-components: ^6 importers: @@ -26,6 +26,9 @@ importers: '@types/react-router-dom': specifier: ^5.3.3 version: 5.3.3 + axios: + specifier: ^1.7.7 + version: 1.7.7 framer-motion: specifier: ^11.11.17 version: 11.11.17(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -48,7 +51,7 @@ importers: specifier: ^5.3.4 version: 5.3.4(react@18.3.1) styled-components: - specifier: ^6.1.13 + specifier: ^6 version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@eslint/js': @@ -661,6 +664,12 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + asynckit@0.4.0: + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + + axios@1.7.7: + resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==} + bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -722,6 +731,10 @@ 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'} + comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -760,6 +773,10 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + delayed-stream@1.0.0: + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} + engines: {node: '>=0.4.0'} + dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} @@ -876,6 +893,19 @@ packages: flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} + follow-redirects@1.15.9: + resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + + form-data@4.0.1: + resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==} + engines: {node: '>= 6'} + framer-motion@11.11.17: resolution: {integrity: sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==} peerDependencies: @@ -1123,6 +1153,14 @@ packages: resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} engines: {node: '>=8.6'} + mime-db@1.52.0: + resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} + engines: {node: '>= 0.6'} + + mime-types@2.1.35: + resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} + engines: {node: '>= 0.6'} + minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} @@ -1218,6 +1256,9 @@ packages: property-information@6.5.0: resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + proxy-from-env@1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -1973,6 +2014,16 @@ snapshots: argparse@2.0.1: {} + asynckit@0.4.0: {} + + axios@1.7.7: + dependencies: + follow-redirects: 1.15.9 + form-data: 4.0.1 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + bail@2.0.2: {} balanced-match@1.0.2: {} @@ -2043,6 +2094,10 @@ snapshots: color-name@1.1.4: {} + combined-stream@1.0.8: + dependencies: + delayed-stream: 1.0.0 + comma-separated-tokens@2.0.3: {} concat-map@0.0.1: {} @@ -2079,6 +2134,8 @@ snapshots: deep-is@0.1.4: {} + delayed-stream@1.0.0: {} + dequal@2.0.3: {} devlop@1.1.0: @@ -2239,6 +2296,14 @@ snapshots: flatted@3.3.1: {} + follow-redirects@1.15.9: {} + + form-data@4.0.1: + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + framer-motion@11.11.17(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: tslib: 2.6.3 @@ -2614,6 +2679,12 @@ snapshots: braces: 3.0.3 picomatch: 2.3.1 + mime-db@1.52.0: {} + + mime-types@2.1.35: + dependencies: + mime-db: 1.52.0 + minimatch@3.1.2: dependencies: brace-expansion: 1.1.11 @@ -2720,6 +2791,8 @@ snapshots: property-information@6.5.0: {} + proxy-from-env@1.1.0: {} + punycode@2.3.1: {} queue-microtask@1.2.3: {} diff --git a/src/plugins/http/base.ts b/src/plugins/http/base.ts new file mode 100644 index 0000000..1b90413 --- /dev/null +++ b/src/plugins/http/base.ts @@ -0,0 +1,62 @@ +import axios, { AxiosInstance, CreateAxiosDefaults } from "axios"; +import { deepAssign } from "./utils"; + +export const enum IHttpMethod { + GET = "GET", + POST = "POST", + DELETE = "DELETE", + PUT = "PUT", +} + +export enum IHttpContentType { + FORM = "application/x-www-form-urlencoded", + JSON = "application/json", +} + +class Plugin { + beforeInit() { } +} + +export abstract class PluginsManager { + static #plugins: Plugin[] = [] + static use(plugin: Plugin) { + this.#plugins.push(plugin) + } + + callPlugin(key: keyof Plugin, ...argus: any[]) { + PluginsManager.#plugins.forEach(p => p[key].apply(this, argus as [])) + } +} + +export abstract class httpBase extends PluginsManager { + static get method() { + return { + GET: "GET", + POST: "POST", + DELETE: "DELETE", + PUT: "PUT", + } + } + + static get contentType() { + return { + FORM: "application/x-www-form-urlencoded", + JSON: "application/json", + } + } + + initDefaultConfig: CreateAxiosDefaults = { + baseURL: process.env.VUE_APP_BASEURL, + timeout: 10000, + headers: { + 'Content-Type': httpBase.contentType.FORM, + } + } + + instance: AxiosInstance | null = null + + create(config?: CreateAxiosDefaults) { + this.instance = axios.create(deepAssign>(axios.defaults, this.initDefaultConfig, config ?? {})) + return this.instance + } +} diff --git a/src/plugins/http/index.ts b/src/plugins/http/index.ts new file mode 100644 index 0000000..95d1c66 --- /dev/null +++ b/src/plugins/http/index.ts @@ -0,0 +1,37 @@ +import { httpBase, PluginsManager } from "./base" + +export const enum IHttpMethod { + GET = "GET", + POST = "POST", + DELETE = "DELETE", + PUT = "PUT", +} + +export enum IHttpContentType { + FORM = "application/x-www-form-urlencoded", + JSON = "application/json", +} + + +const FlyPoll: Map = new Map() + +class Fly extends httpBase { + constructor() { + super() + this.Init() + } + static get(name?: string): Fly { + if (!name) name = "$defalt" + if (!FlyPoll.has(name)) { + FlyPoll.set(name, new Fly()) + } + return FlyPoll.get(name) + } + Init() { + this.callPlugin("beforeInit") + this.create() + } +} + +Fly.get() + diff --git a/src/plugins/http/plugins.ts b/src/plugins/http/plugins.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/plugins/http/utils.ts b/src/plugins/http/utils.ts new file mode 100644 index 0000000..4349e7f --- /dev/null +++ b/src/plugins/http/utils.ts @@ -0,0 +1,36 @@ + +/** + * 实现一个深度拷贝的 assign 函数 + * @param {Object} target 目标对象 + * @param {...Object} sources 源对象列表 + * @return {Object} 返回深度拷贝后的目标对象 + */ +export function deepAssign>(target: T, ...sources: T[]) { + if(target === null) return target; + // 如果目标不是对象或数组，则直接返回以避免错误 + if (typeof target !== 'object' || Array.isArray(target)) { + return target; + } + // 遍历源对象列表 + sources.forEach(source => { + if (source && typeof source === 'object') { + for (let key in source) { + if (source.hasOwnProperty(key)) { + const value = source[key]; + // 如果值是对象或数组，则进行递归拷贝 + if (typeof value === 'object' && !Array.isArray(value) && value !== null) { + if (!target[key]) { + target[key] = (Array.isArray(value) ? ([] as any) : {}); + } + deepAssign(target[key], value); + } else { + // 否则直接赋值 + target[key] = value; + } + } + } + } + }); + + return target; +}