feat: 改用alova请求

.env.development

@@ -4,7 +4,7 @@ VITE_ENV = development
 VITE_PORT = 3000
 
 # BASE_URL
-VITE_BASE_URL = https://api-catch.ranesuangyu.top
+VITE_BASE_URL = /api/v1
 
 # 上传域名
 VITE_UPLOAD_URL = /upload

.env.production

@@ -2,7 +2,6 @@
 VITE_ENV = production
 
 # api域名
-VITE_BASE_URL = https://api-catch.ranesuangyu.top
+VITE_BASE_URL = /api/v1
-
 # 上传域名
 VITE_UPLOAD_URL = /upload

package.json

@@ -37,6 +37,8 @@
         "prepare": "husky install"
     },
     "dependencies": {
+        "@alova/adapter-uniapp": "^1.1.1",
+        "@alova/mock": "^1.2.2",
         "@dcloudio/uni-app": "3.0.0-alpha-3071220230324001",
         "@dcloudio/uni-app-plus": "3.0.0-alpha-3071220230324001",
         "@dcloudio/uni-components": "3.0.0-alpha-3071220230324001",
@@ -52,10 +54,10 @@
         "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3071220230324001",
         "@fortawesome/fontawesome-free": "^6.4.0",
         "@iconify/iconify": "^3.1.0",
+        "alova": "^2.0.9",
         "crypto-js": "^4.1.1",
         "echarts": "^5.4.2",
         "lodash-es": "^4.17.21",
-        "luch-request": "^3.0.8",
         "pinia": "^2.0.33",
         "qs": "^6.11.1",
         "vue": "^3.2.47"

src/enums/httpEnum.ts

@@ -7,3 +7,15 @@ export enum ResultEnum {
     TIMEOUT = 401,
     TYPE = 'success',
 }
+
+/**
+ * @description: contentType
+ */
+export enum ContentTypeEnum {
+    // json
+    JSON = 'application/json;charset=UTF-8',
+    // form-data qs
+    FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+    // form-data  upload
+    FORM_DATA = 'multipart/form-data;charset=UTF-8',
+}

src/services/model/baseModel.d.ts

@@ -1,5 +1,7 @@
+import { ResultEnum } from '@/enums/httpEnum';
+
 declare interface API<T = any> {
-    code: number;
+    code: ResultEnum;
     data?: T;
     message: string;
 }

src/utils/env.ts

@@ -61,7 +61,6 @@ export function isProdMode(): boolean {
  * @example:
  */
 export function getBaseUrl(): string {
-    if (judgePlatform(PLATFORMS.H5) && isDevMode()) return '/api';
     return getEnvValue<string>('VITE_BASE_URL');
 }
 

src/utils/http/checkStatus.ts

@@ -0,0 +1,51 @@
+import { Toast } from '@/utils/uniapi/prompt';
+
+export function checkStatus(status: number, msg: string): void {
+    let errMessage = null;
+    switch (status) {
+        case 400:
+            errMessage = `${msg}`;
+            break;
+        // 401: Not logged in
+        // Jump to the login page if not logged in, and carry the path of the current page
+        // Return to the current page after successful login. This step needs to be operated on the login page.
+        case 401:
+            errMessage = '用户没有权限（令牌、用户名、密码错误）!';
+            break;
+        case 403:
+            errMessage = '用户得到授权，但是访问是被禁止的!';
+            break;
+        case 404:
+            errMessage = '网络请求错误,未找到该资源!';
+            break;
+        case 405:
+            errMessage = '网络请求错误,请求方法未允许!';
+            break;
+        case 408:
+            errMessage = '网络请求超时!';
+            break;
+        case 500:
+            errMessage = '服务器错误,请联系管理员!';
+            break;
+        case 501:
+            errMessage = '网络未实现!';
+            break;
+        case 502:
+            errMessage = '服务不可用，服务器暂时过载或维护!';
+            break;
+        case 503:
+            errMessage = '服务不可用，服务器暂时过载或维护!';
+            break;
+        case 504:
+            errMessage = '网络超时!';
+            break;
+        case 505:
+            errMessage = 'http版本不支持该请求!';
+            break;
+        default:
+    }
+
+    if (errMessage) {
+        Toast(errMessage);
+    }
+}

src/utils/http/index.ts

@@ -1,65 +1,79 @@
-import Request from 'luch-request';
+import { createAlova } from 'alova';
-import { assign } from 'lodash-es';
+import AdapterUniapp from '@alova/adapter-uniapp';
-import { Toast } from '@/utils/uniapi/prompt';
 import { getBaseUrl } from '@/utils/env';
+import { mockAdapter } from '@/mock';
+import { assign } from 'lodash-es';
 import { useAuthStore } from '@/state/modules/auth';
-import { ResultEnum } from '@/enums/httpEnum';
+import { checkStatus } from '@/utils/http/checkStatus';
+import { ContentTypeEnum, ResultEnum } from '@/enums/httpEnum';
+import { Toast } from '@/utils/uniapi/prompt';
+import { API } from '@/services/model/baseModel';
 
 const BASE_URL = getBaseUrl();
+
 const HEADER = {
-    'Content-Type': 'application/json;charset=UTF-8;',
+    'Content-Type': ContentTypeEnum.JSON,
     Accept: 'application/json, text/plain, */*',
 };
 
-function createRequest() {
+// @ts-ignore
-    return new Request({
-        baseURL: BASE_URL,
-        header: HEADER,
-        custom: {
-            auth: true,
-        },
-    });
-}
-
-const request = createRequest();
 /**
- * 请求拦截器
+ * alova 请求实例
+ * @link https://github.com/alovajs/alova
  */
-request.interceptors.request.use(
+const alovaInstance = createAlova({
-    (options) => {
+    baseURL: BASE_URL,
-        if (options.custom?.auth) {
+    ...AdapterUniapp({
-            const authStore = useAuthStore();
+        mockRequest: mockAdapter,
-            if (!authStore.isLogin) {
+    }),
-                Toast('请先登录');
+    timeout: 5000,
-                // token不存在跳转到登录页
+    beforeRequest: (method) => {
-                return Promise.reject(options);
+        const authStore = useAuthStore();
+        method.config.headers = assign(method.config.headers, HEADER, authStore.getAuthorization);
+    },
+    responsed: {
+        /**
+         * 请求成功的拦截器
+         * 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
+         * @param response
+         * @param method
+         */
+        onSuccess: async (response, method) => {
+            const { config } = method;
+            const { enableDownload, enableUpload } = config;
+            // @ts-ignore
+            const { statusCode, data: rawData } = response;
+            const { code, message, data } = rawData as API;
+            if (statusCode === 200) {
+                if (enableDownload) {
+                    // 下载处理
+                    return rawData;
+                }
+                if (enableUpload) {
+                    // 上传处理
+                    return rawData;
+                }
+                if (code === ResultEnum.SUCCESS) {
+                    return data as any;
+                }
+                message && Toast(message);
+                return Promise.reject(rawData);
             }
-            options.header = assign(options.header, {
+            checkStatus(statusCode, message || '');
-                authorization: `Bearer ${authStore.getToken}`,
+            return Promise.reject(rawData);
-            });
+        },
-        }
-        return options;
-    },
-    (options) => Promise.reject(options)
-);
 
-/**
+        /**
- * 响应拦截器
+         * 请求失败的拦截器，请求错误时将会进入该拦截器。
- */
+         * 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
-request.interceptors.response.use(
+         * @param err
-    async (response) => {
+         * @param method
-        const { data: resData } = response;
+         */
-        const { code, message } = resData;
+        onError: (err, method) => {
-        if (code === ResultEnum.SUCCESS) {
+            // error('Request Error!');
-            return resData as any;
+            return Promise.reject({ err, method });
-        }
+        },
-        Toast(message);
-        return Promise.reject(resData);
     },
-    (response) =>
+});
-        // 请求错误做点什么。可以使用async await 做异步操作
-        // error('Request Error!');
-        Promise.reject(response)
-);
 
-export { request };
+export const request = alovaInstance;