From 7f9c98ab8db101b7a7cd21f8f48e8353d33a3666 Mon Sep 17 00:00:00 2001 From: Soybean Date: Thu, 28 Jul 2022 13:19:50 +0800 Subject: [PATCH] =?UTF-8?q?refactor(projects):=20=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E9=80=82=E9=85=8D=E5=99=A8=E5=87=BD=E6=95=B0=E8=8C=83=E5=9E=8B?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E3=80=81=E4=BC=98=E5=8C=96=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=9A=84=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env-config.ts | 23 +++++++++++++---------- build/config/proxy.ts | 9 +++++++-- package.json | 12 ++++++------ src/service/adapter/index.ts | 12 ------------ src/service/api/demo.adapter.ts | 10 ++++++++++ src/service/api/demo.ts | 8 ++++---- src/service/request/index.ts | 9 ++++++--- src/typings/env.d.ts | 10 ++++++---- src/typings/system.d.ts | 14 ++++++++++++++ src/utils/service/handler.ts | 18 ++++++++---------- vite.config.ts | 6 +++--- 11 files changed, 77 insertions(+), 54 deletions(-) delete mode 100644 src/service/adapter/index.ts create mode 100644 src/service/api/demo.adapter.ts diff --git a/.env-config.ts b/.env-config.ts index 3eddb8b7..3319b026 100644 --- a/.env-config.ts +++ b/.env-config.ts @@ -1,30 +1,33 @@ -/** 请求环境配置 */ +/** 请求服务的环境配置 */ type ServiceEnv = Record; -/** 不同服务的环境配置 */ +/** 不同请求服务的环境配置 */ const serviceEnv: ServiceEnv = { dev: { + pattern: '/proxy-pattrn', url: 'http://localhost:8080', - proxy: '/proxy-flag' + secondUrl: 'http://localhost:8081' }, test: { + pattern: '/proxy-pattrn', url: 'http://localhost:8080', - proxy: '/proxy-flag' + secondUrl: 'http://localhost:8081' }, prod: { + pattern: '/proxy-pattrn', url: 'http://localhost:8080', - proxy: '/proxy-flag' + secondUrl: 'http://localhost:8081' } }; /** - * 获取当前模式的环境配置 + * 获取当前环境模式下的请求服务的配置 * @param env 环境 */ -export function getEnvConfig(env: ImportMetaEnv) { - const { VITE_ENV_TYPE = 'dev' } = env; +export function getServiceEnvConfig(env: ImportMetaEnv) { + const { VITE_SERVICE_ENV = 'dev' } = env; - const envConfig = serviceEnv[VITE_ENV_TYPE]; + const config = serviceEnv[VITE_SERVICE_ENV]; - return envConfig; + return config; } diff --git a/build/config/proxy.ts b/build/config/proxy.ts index 86dbc0bd..9f2b448a 100644 --- a/build/config/proxy.ts +++ b/build/config/proxy.ts @@ -9,10 +9,15 @@ export function createViteProxy(isOpenProxy: boolean, envConfig: ServiceEnvConfi if (!isOpenProxy) return undefined; const proxy: Record = { - [envConfig.proxy]: { + [envConfig.pattern]: { target: envConfig.url, changeOrigin: true, - rewrite: path => path.replace(new RegExp(`^${envConfig.proxy}`), '') + rewrite: path => path.replace(new RegExp(`^${envConfig.pattern}`), '') + }, + [envConfig.pattern]: { + target: envConfig.secondUrl, + changeOrigin: true, + rewrite: path => path.replace(new RegExp(`^${envConfig.pattern}`), '') } }; diff --git a/package.json b/package.json index bceebdf1..eec1e02a 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,12 @@ "url": "https://github.com/honghuangdc" }, "scripts": { - "dev": "cross-env VITE_ENV_TYPE=dev vite", - "dev:test": "cross-env VITE_ENV_TYPE=test vite", - "dev:prod": "cross-env VITE_ENV_TYPE=prod vite", - "build": "npm run typecheck && cross-env VITE_ENV_TYPE=prod vite build", - "build:dev": "npm run typecheck && cross-env VITE_ENV_TYPE=dev vite build", - "build:test": "npm run typecheck && cross-env VITE_ENV_TYPE=test vite build", + "dev": "cross-env VITE_SERVICE_ENV=dev vite", + "dev:test": "cross-env VITE_SERVICE_ENV=test vite", + "dev:prod": "cross-env VITE_SERVICE_ENV=prod vite", + "build": "npm run typecheck && cross-env VITE_SERVICE_ENV=prod vite build", + "build:dev": "npm run typecheck && cross-env VITE_SERVICE_ENV=dev vite build", + "build:test": "npm run typecheck && cross-env VITE_SERVICE_ENV=test vite build", "build:vercel": "cross-env VITE_HASH_ROUTE=Y VITE_VERCEL=Y vite build", "preview": "vite preview", "typecheck": "vue-tsc --noEmit --skipLibCheck", diff --git a/src/service/adapter/index.ts b/src/service/adapter/index.ts deleted file mode 100644 index 16291344..00000000 --- a/src/service/adapter/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export function adapterOfFetchDataWithAdapter( - res: Service.RequestResult -): Demo.DataWithAdapter { - const { dataId, dataName } = res.data!; - - const result: Demo.DataWithAdapter = { - id: dataId, - name: dataName - }; - - return result; -} diff --git a/src/service/api/demo.adapter.ts b/src/service/api/demo.adapter.ts new file mode 100644 index 00000000..bc82f782 --- /dev/null +++ b/src/service/api/demo.adapter.ts @@ -0,0 +1,10 @@ +export function adapterOfFetchDataWithAdapter(data: ApiDemo.DataWithAdapter): Demo.DataWithAdapter { + const { dataId, dataName } = data; + + const result: Demo.DataWithAdapter = { + id: dataId, + name: dataName + }; + + return result; +} diff --git a/src/service/api/demo.ts b/src/service/api/demo.ts index 024d65dc..e61994b5 100644 --- a/src/service/api/demo.ts +++ b/src/service/api/demo.ts @@ -1,11 +1,11 @@ -import { serviceAdapter } from '@/utils'; +import { adapter } from '@/utils'; import { request, mockRequest } from '../request'; -import { adapterOfFetchDataWithAdapter } from '../adapter'; +import { adapterOfFetchDataWithAdapter } from './demo.adapter'; -/** 带有适配器的请求(将请求结果进行数据处理) */ +/** 带有适配器的请求示例 */ export async function fetchDataWithAdapter() { const res = await mockRequest.post('/apiDemoWithAdapter'); - return serviceAdapter(adapterOfFetchDataWithAdapter, res); + return adapter(adapterOfFetchDataWithAdapter, res); } /** 测试代理后的请求 */ diff --git a/src/service/request/index.ts b/src/service/request/index.ts index 39ccf389..890eb9ba 100644 --- a/src/service/request/index.ts +++ b/src/service/request/index.ts @@ -1,9 +1,12 @@ -import { getEnvConfig } from '~/.env-config'; +import { getServiceEnvConfig } from '~/.env-config'; import { createRequest } from './request'; -const envConfig = getEnvConfig(import.meta.env); +const { pattern, url, secondUrl } = getServiceEnvConfig(import.meta.env); + const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y'; -export const request = createRequest({ baseURL: isHttpProxy ? envConfig.proxy : envConfig.url }); +export const request = createRequest({ baseURL: isHttpProxy ? pattern : url }); + +export const secondRequest = createRequest({ baseURL: isHttpProxy ? pattern : secondUrl }); export const mockRequest = createRequest({ baseURL: '/mock' }); diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts index db9dedef..756e69ec 100644 --- a/src/typings/env.d.ts +++ b/src/typings/env.d.ts @@ -8,10 +8,12 @@ type ServiceEnvType = 'dev' | 'test' | 'prod'; /** 后台服务的环境配置 */ interface ServiceEnvConfig { + /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */ + pattern: '/proxy-pattrn'; /** 请求地址 */ url: string; - /** 代理标识, 用于拦截地址转发代理(和后端请求路径中有无该路径没有关系) */ - proxy: '/proxy-flag'; + /** 另一个后端请求地址(有多个不同的后端服务时) */ + secondUrl: string; } interface ImportMetaEnv { @@ -31,8 +33,8 @@ interface ImportMetaEnv { readonly VITE_AUTH_ROUTE_MODE: 'static' | 'dynamic'; /** 路由首页的路径 */ readonly VITE_ROUTE_HOME_PATH: Exclude; - /** vite环境类型 */ - readonly VITE_ENV_TYPE?: ServiceEnvType; + /** 后端服务的环境类型 */ + readonly VITE_SERVICE_ENV?: ServiceEnvType; /** 开启请求代理 */ readonly VITE_HTTP_PROXY?: 'Y' | 'N'; /** 是否开启打包文件大小结果分析 */ diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts index 55d60dba..6bf34909 100644 --- a/src/typings/system.d.ts +++ b/src/typings/system.d.ts @@ -70,6 +70,20 @@ declare namespace Service { /** 自定义的请求结果 */ type RequestResult = SuccessResult | FailedResult; + /** 多个请求数据结果 */ + type MultiRequestResult = T extends [infer First, ...infer Rest] + ? First extends any + ? Rest extends any[] + ? [Service.RequestResult, ...MultiRequestResult] + : [Service.RequestResult] + : Rest extends any[] + ? MultiRequestResult + : [] + : []; + + /** 请求结果的适配器函数 */ + type ServiceAdapter = (...args: A) => T; + /** mock示例接口类型：后端接口返回的数据的类型 */ interface MockServiceResult { /** 状态码 */ diff --git a/src/utils/service/handler.ts b/src/utils/service/handler.ts index 2cbc306b..3bbc426c 100644 --- a/src/utils/service/handler.ts +++ b/src/utils/service/handler.ts @@ -14,14 +14,11 @@ export async function handleServiceResult(error: Service.RequestError | return success; } -type Adapter = (...args: Service.RequestResult[]) => T; - -/** - * 请求结果的数据转换适配器 - * @param adapter - 适配器函数 - * @param args - 适配器函数的参数 - */ -export function serviceAdapter(adapter: T, ...args: TypeUtil.GetFunArgs) { +/** 请求结果的适配器：用于接收适配器函数和请求结果 */ +export function adapter( + adapterFun: T, + ...args: Service.MultiRequestResult> +): Service.RequestResult> { let result: Service.RequestResult | undefined; const hasError = args.some(item => { @@ -36,11 +33,12 @@ export function serviceAdapter(adapter: T, ...args: TypeUtil. }); if (!hasError) { + const adapterFunArgs = args.map(item => item.data); result = { error: null, - data: adapter(...args) + data: adapterFun(...adapterFunArgs) }; } - return result as Service.RequestResult>; + return result!; } diff --git a/vite.config.ts b/vite.config.ts index 4ba18418..56457bac 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,15 +1,15 @@ import { defineConfig, loadEnv } from 'vite'; import { getRootPath, getSrcPath, viteDefine, setupVitePlugins, createViteProxy } from './build'; -import { getEnvConfig } from './.env-config'; +import { getServiceEnvConfig } from './.env-config'; export default defineConfig(configEnv => { - const viteEnv = loadEnv(configEnv.mode, process.cwd()) as ImportMetaEnv; + const viteEnv = loadEnv(configEnv.mode, process.cwd()) as unknown as ImportMetaEnv; const rootPath = getRootPath(); const srcPath = getSrcPath(); const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y'; - const envConfig = getEnvConfig(viteEnv); + const envConfig = getServiceEnvConfig(viteEnv); return { base: viteEnv.VITE_BASE_URL,