feat: 请求部分代码改造 (#185)

* feat: 重新封装axios

* chore: 将请求封装规范为request

* fix: 修正引用方式

* perf: 使用lodash替换部分函数

* feat: axios新增支持过滤重复请求

* feat: axios新增切换地址直连或Vite反向代理

* chore: 将lodash-es切换至lodash并将引入方式改为路径引入

Author: timi137137

.eslintrc

@@ -60,8 +60,11 @@
         "varsIgnorePattern": "^_"
       }
     ],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/ban-types": "off"
+    "@typescript-eslint/ban-types": "off",
+    "class-methods-use-this": "off" // 因为AxiosCancel必须实例化而能静态化所以加的规则，如果有办法解决可以取消
   },
   "overrides": [
     {

package.json

@@ -21,9 +21,11 @@
     "axios": "^0.27.2",
     "dayjs": "^1.10.6",
     "echarts": "~5.1.2",
+    "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
     "qrcode.vue": "^3.2.2",
+    "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
     "tdesign-vue-next": "^0.16.0",
     "tvision-color": "^1.3.1",
@@ -35,6 +37,8 @@
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/echarts": "^4.9.10",
+    "@types/lodash": "^4.14.182",
+    "@types/qs": "^6.9.7",
     "@types/ws": "^8.2.2",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",

src/config/proxy.ts

@@ -1,4 +1,5 @@
 export default {
+  isRequestProxy: true,
   development: {
     // 开发环境接口请求
     host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',

src/pages/detail/advanced/index.vue

@@ -120,7 +120,7 @@ export default {
 import { ref, onMounted } from 'vue';
 import { prefix } from '@/config/global';
 import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './constants';
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 import { ResDataType } from '@/types/interface';
 
 import Product from './components/Product.vue';
@@ -145,7 +145,7 @@ const stepUpdate = () => {
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get('/api/get-purchase-list');
+    const res: ResDataType = await request.get({ url: '/api/get-purchase-list' });
     if (res.code === 0) {
       const { list = [] } = res.data;
       data.value = list;

src/pages/detail/deploy/index.vue

@@ -90,7 +90,7 @@ import { changeChartsTheme } from '@/utils/color';
 
 import { prefix } from '@/config/global';
 import { ResDataType } from '@/types/interface';
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 
 echarts.use([
   TitleComponent,
@@ -115,7 +115,7 @@ const pagination = ref({
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get('/api/get-project-list');
+    const res: ResDataType = await request.get({ url: '/api/get-project-list' });
     if (res.code === 0) {
       const { list = [] } = res.data;
       data.value = list;

src/pages/list/base/index.vue

@@ -83,7 +83,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import { CONTRACT_STATUS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
 import Trend from '@/components/trend/index.vue';
 import { ResDataType } from '@/types/interface';
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 import { useSettingStore } from '@/store';
 
 import { COLUMNS } from './constants';
@@ -103,7 +103,7 @@ const dataLoading = ref(false);
 const fetchData = async () => {
   dataLoading.value = true;
   try {
-    const res: ResDataType = await request.get('/api/get-list');
+    const res: ResDataType = await request.get({ url: '/api/get-list' });
     if (res.code === 0) {
       const { list = [] } = res.data;
       data.value = list;

src/pages/list/card/index.vue

@@ -73,7 +73,7 @@ import { SearchIcon } from 'tdesign-icons-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
 import ProductCard from '@/components/product-card/index.vue';
 import DialogForm from './components/DialogForm.vue';
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 import { ResDataType } from '@/types/interface';
 
 const INITIAL_DATA = {
@@ -93,7 +93,7 @@ const dataLoading = ref(true);
 
 const fetchData = async () => {
   try {
-    const res: ResDataType = await request.get('/api/get-card-list');
+    const res: ResDataType = await request.get({ url: '/api/get-card-list' });
     if (res.code === 0) {
       const { list = [] } = res.data;
       productList.value = list;

src/pages/list/components/CommonTable.vue

@@ -117,7 +117,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import Trend from '@/components/trend/index.vue';
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 import { ResDataType } from '@/types/interface';
 import { useSettingStore } from '@/store';
 
@@ -199,7 +199,7 @@ const dataLoading = ref(false);
 const fetchData = async () => {
   dataLoading.value = true;
   try {
-    const res: ResDataType = await request.get('/api/get-list');
+    const res: ResDataType = await request.get({ url: '/api/get-list' });
     if (res.code === 0) {
       const { list = [] } = res.data;
       data.value = list;

src/types/axios.d.ts

@@ -0,0 +1,29 @@
+import { AxiosRequestConfig } from 'axios';
+
+export interface RequestOptions {
+  apiUrl?: string;
+  isJoinPrefix?: boolean;
+  urlPrefix?: string;
+  joinParamsToUrl?: boolean;
+  formatDate?: boolean;
+  isTransformResponse?: boolean;
+  isReturnNativeResponse?: boolean;
+  ignoreRepeatRequest?: boolean;
+  joinTime?: boolean;
+  withToken?: boolean;
+  retry?: {
+    count: number;
+    delay: number;
+  };
+}
+
+export interface Result<T = any> {
+  code: number;
+  type: 'success' | 'error' | 'warning';
+  message: string;
+  result: T;
+}
+
+export interface AxiosRequestConfigRetry extends AxiosRequestConfig {
+  retryCount?: number;
+}

src/types/globals.d.ts

@@ -21,3 +21,5 @@ declare module '*.svg' {
   const CONTENT: string;
   export default CONTENT;
 }
+
+declare type Recordable<T = any> = Record<string, T>;