chore(projects): 增加axios

2025-04-05 19:41:59 +08:00 · 2022-08-07 01:45:38 +08:00 · 2022-08-07 01:45:38 +08:00 · cbe7ed73ae
commit cbe7ed73ae
parent 8f0adf25c9
13 changed files with 140 additions and 8 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -11,5 +11,5 @@ lib
 /docs
 .vscode
 .local
-!.env-config.ts
+!.env.config.ts
 components.d.ts
--- 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({
--- 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') {
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/pixel.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
--- 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"
  },
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/src/App.vue
+++ b/src/App.vue
@ -16,7 +16,7 @@ const themeOverrides: GlobalThemeOverrides = {
 </script>

 <template>
-  <n-config-provider :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides">
+  <n-config-provider wh-full :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides">
    <router-view />
  </n-config-provider>
 </template>
--- 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路由模式 */
--- a/src/types/systeam.d.ts
+++ b/src/types/systeam.d.ts
@ -0,0 +1,14 @@
+/** 请求的相关类型 */
+declare namespace Service {
+  /** 后端接口返回的数据结构配置 */
+  interface BackendResultConfig {
+    /** 表示后端请求状态码的属性字段 */
+    codeKey: string;
+    /** 表示后端请求数据的属性字段 */
+    dataKey: string;
+    /** 表示后端消息的属性字段 */
+    msgKey: string;
+    /** 后端业务上定义的成功请求的状态 */
+    successCode: number | string;
+  }
+}
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
--- a/src/utils/http/instance.ts
+++ 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);
+      },
+    );
+  }
+}
--- a/src/utils/http/request.ts
+++ 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 });
+  }
+}
--- a/src/views/test/test1.vue
+++ b/src/views/test/test1.vue
@ -1,7 +1,12 @@
 <template>
  <div text-center c-blue>I prove that you have made the jump test1.</div>
+  <div @click="pinter">click me</div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+const pinter = () => {
+  console.log('打印环境配置', import.meta.env);
+};
+</script>

 <style scoped></style>