diff --git a/.eslintignore b/.eslintignore index a5a8c50..3d8ae95 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,5 +11,5 @@ lib /docs .vscode .local -!.env-config.ts +!.env.config.ts components.d.ts diff --git a/build/plugins/compress.ts b/build/plugins/compress.ts index 9d0b33d..6a659a7 100644 --- a/build/plugins/compress.ts +++ b/build/plugins/compress.ts @@ -1,6 +1,6 @@ import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md -export default (env) => { +export default (env: ImportMetaEnv) => { // 默认使用gzip压缩 const { VITE_COMPRESS_TYPE = 'gzip' } = env; return viteCompression({ diff --git a/build/plugins/index.ts b/build/plugins/index.ts index a93ef4a..92b67db 100644 --- a/build/plugins/index.ts +++ b/build/plugins/index.ts @@ -10,7 +10,7 @@ import unplugin from './unplugin'; * @param {*} env - 环境变量配置 * @return {*} */ -export function setVitePlugins(env) { +export function setVitePlugins(env: ImportMetaEnv) { const plugins = [...vue, html(env), unocss, ...unplugin]; // 是否压缩 if (env.VITE_COMPRESS_OPEN === 'Y') { diff --git a/index.html b/index.html index ec34ff3..c256275 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + <%= title %> diff --git a/package.json b/package.json index 1c93eb5..825eb4d 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write" }, "dependencies": { + "axios": "^0.27.2", "vue": "^3.2.37", "vue-router": "^4.1.3" }, diff --git a/public/pixel.svg b/public/favicon.svg similarity index 100% rename from public/pixel.svg rename to public/favicon.svg diff --git a/src/App.vue b/src/App.vue index d5a9ab8..38c5801 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,7 +16,7 @@ const themeOverrides: GlobalThemeOverrides = { diff --git a/src/types/env.d.ts b/src/types/env.d.ts index 395f033..ada04c3 100644 --- a/src/types/env.d.ts +++ b/src/types/env.d.ts @@ -5,10 +5,10 @@ interface ImportMetaEnv { readonly VITE_APP_TITLE: string; /** 开启请求代理 */ readonly VITE_HTTP_PROXY?: 'Y' | 'N'; - /** 是否开启打包压缩 */ - readonly VITE_COMPRESS?: 'Y' | 'N'; /** 是否开启打包依赖分析 */ readonly VITE_VISUALIZER?: 'Y' | 'N'; + /** 是否开启打包压缩 */ + readonly VITE_COMPRESS_OPEN?: 'Y' | 'N'; /** 压缩算法类型 */ readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'; /** hash路由模式 */ diff --git a/src/types/systeam.d.ts b/src/types/systeam.d.ts new file mode 100644 index 0000000..995e772 --- /dev/null +++ b/src/types/systeam.d.ts @@ -0,0 +1,14 @@ +/** 请求的相关类型 */ +declare namespace Service { + /** 后端接口返回的数据结构配置 */ + interface BackendResultConfig { + /** 表示后端请求状态码的属性字段 */ + codeKey: string; + /** 表示后端请求数据的属性字段 */ + dataKey: string; + /** 表示后端消息的属性字段 */ + msgKey: string; + /** 后端业务上定义的成功请求的状态 */ + successCode: number | string; + } +} diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/http/instance.ts b/src/utils/http/instance.ts new file mode 100644 index 0000000..a207570 --- /dev/null +++ b/src/utils/http/instance.ts @@ -0,0 +1,54 @@ +import axios from 'axios'; +import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; + +/** + * @description: 封装axios请求类 + */ +export default class createAxiosInstance { + // axios 实例 + instance: AxiosInstance; + // 后台字段配置 + backendConfig: Service.BackendResultConfig; + // 基础配置，url和超时时间 + baseConfig: AxiosRequestConfig = { baseURL: '/api', timeout: 60000 }; + + constructor( + config: AxiosRequestConfig, + backendConfig: Service.BackendResultConfig = { + codeKey: 'code', + dataKey: 'data', + msgKey: 'msg', + successCode: '200', + }, + ) { + this.backendConfig = backendConfig; + this.instance = axios.create(config); + this.setInterceptor(); + } + + // 设置类拦截器 + setInterceptor() { + this.instance.interceptors.request.use( + (config: AxiosRequestConfig) => { + // 一般会请求拦截里面加token + console.log('全局请求拦截器'); + return config; + }, + (err: any) => err, + ); + this.instance.interceptors.response.use( + // 因为接口的数据都在res.data下，所以直接返回res.data + // 系统如果有自定义code也可以在这里处理 + (res: AxiosResponse) => { + console.log('全局响应拦截器'); + return res.data; + }, + (err: any) => { + // 这里用来处理http常见错误，进行全局提示 + console.log('错误状态码：', err.response.status); + // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可 + return Promise.reject(err.response); + }, + ); + } +} diff --git a/src/utils/http/request.ts b/src/utils/http/request.ts new file mode 100644 index 0000000..a691dbd --- /dev/null +++ b/src/utils/http/request.ts @@ -0,0 +1,58 @@ +import type { AxiosInstance, AxiosRequestConfig } from 'axios'; +import createAxiosInstance from './instance'; + +type RequestMethod = 'get' | 'post' | 'put' | 'delete'; + +// 获取aixos请求方法 +async function getRequestResponse( + instance: AxiosInstance, + method: RequestMethod, + url: string, + data?: any, + config?: AxiosRequestConfig, +) { + let res: any; + if (method === 'get' || method === 'delete') { + res = await instance[method](url, config); + } else { + res = await instance[method](url, data, config); + } + return res; +} + +interface RequestParam { + url: string; + method?: RequestMethod; + data?: any; + axiosConfig?: AxiosRequestConfig; +} + +export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig) { + const axiosInstance = new createAxiosInstance(axiosConfig, backendConfig); + + /** + * 异步promise请求 + * @param param - 请求参数 + * - url: 请求地址 + * - method: 请求方法(默认get) + * - data: 请求的body的data + * - axiosConfig: axios配置 + */ + async function asyncRequest(param: RequestParam) { + const { instance } = axiosInstance; + const method = param.method || 'get'; + const { url } = param; + const res = await getRequestResponse(instance, method, url, param.data, param.axiosConfig); + return res; + } + + /** + * @description: get请求 + * @param {string} url + * @param {AxiosRequestConfig} config + * @return {*} + */ + function get(url: string, config: AxiosRequestConfig) { + return asyncRequest({ url, method: 'get', axiosConfig: config }); + } +} diff --git a/src/views/test/test1.vue b/src/views/test/test1.vue index 87ba656..55d0bfb 100644 --- a/src/views/test/test1.vue +++ b/src/views/test/test1.vue @@ -1,7 +1,12 @@ - +