refactor(http): 升级alova到v3, 优化状态码和逻辑错误处理

build/vitePlugins.ts

@@ -35,7 +35,7 @@ export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[]
           'uni-mini-router': ['useRouter', 'useRoute'],
         },
         {
-          alova: ['useRequest'],
+          'alova/client': ['useRequest'],
         },
       ],
       dts: 'typings/auto-imports.d.ts',

package.json

@@ -36,8 +36,8 @@
     "postinstall": "weapp-tw patch"
   },
   "dependencies": {
-    "@alova/adapter-uniapp": "^1.2.2",
+    "@alova/adapter-uniapp": "^2.0.4",
-    "@alova/mock": "^1.5.2",
+    "@alova/mock": "^2.0.4",
     "@dcloudio/uni-app": "3.0.0-alpha-4020520240808001",
     "@dcloudio/uni-app-plus": "3.0.0-alpha-4020520240808001",
     "@dcloudio/uni-components": "3.0.0-alpha-4020520240808001",
@@ -52,7 +52,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4020520240808001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020520240808001",
     "@multiavatar/multiavatar": "^1.0.7",
-    "alova": "^2.21.4",
+    "alova": "^3.0.9",
     "crypto-js": "^4.2.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.2.2",

src/pages/about/index.vue

@@ -19,7 +19,7 @@ function handleLoginOut() {
 <template>
   <view class="text-md pt-36">
     <view v-if="loggedIn" class="text-center">
-      <image class="h-56 w-56" :src="userInfo?.avatar" />
+      <image class="h-8 w-8" :src="userInfo?.avatar" />
       <view class="mt-2">
         {{ userInfo?.nickname }}
       </view>

src/pages/index/index.vue

@@ -8,7 +8,7 @@ const appTitle = 'uniapp-vue3';
 
 <template>
   <view class="flex flex-col items-center gap-y-2 pt-36">
-    <image :src="logo" class="h-56 w-56" alt="" mode="widthFix" />
+    <image :src="logo" class="h-8 w-8" alt="" mode="widthFix" />
     <view class="text-xl font-semibold">
       {{ appTitle }}
     </view>

src/pages/log/index.vue

@@ -12,7 +12,7 @@ const userStore = useUserStore();
     <view class="mt-36 text-center">
       登录后访问log
     </view>
-    <image class="my-4 h-48 w-48" :src="userStore.userInfo?.avatar" mode="aspectFit" lazy-load="false" binderror="" bindload="" />
+    <image class="my-4 h-8 w-8" :src="userStore.userInfo?.avatar" mode="aspectFit" lazy-load="false" binderror="" bindload="" />
     <view>{{ userStore.userInfo?.nickname }}</view>
   </view>
 </template>

src/router/guard.ts

@@ -8,7 +8,6 @@ export function createRouterGuard(router: Router) {
 
 function createBeforeEachGuard(router: Router) {
   router.beforeEach((to, _, next) => {
-    console.log('beforeEach', to);
     const _isLogin = isLogin();
     if (to && to?.meta?.ignoreAuth) {
       // 如果目标路由忽略验证直接跳转
@@ -39,6 +38,5 @@ function createAfterEachGuard(router: Router) {
       // 如果已经登录且目标页面是登录页面则跳转至首页
       router.replaceAll({ name: 'Home' });
     }
-    console.log('afterEach', to);
   });
 }

src/stores/modules/user.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia';
-import { useRequest } from 'alova';
 import { getUserInfoApi } from '@/services/api/user';
 import type { UserInfoModel } from '@/services/model/userModel';
 import { login as loginApi } from '@/services/api/auth';

src/utils/http/faultTolerance.ts

@@ -1,6 +1,12 @@
 import { Toast } from '@/utils/uniapi/prompt';
+import type { ResultEnum } from '@/enums/httpEnum';
 
-export function checkStatus(status: number, msg: string): void {
+/**
+ * Http错误处理
+ * @param status
+ * @param msg
+ */
+export function handleHttpStatus(status: number, msg: string): void {
   let errMessage = null;
   switch (status) {
       case 400:
@@ -49,3 +55,22 @@ export function checkStatus(status: number, msg: string): void {
     Toast(errMessage);
   }
 }
+
+/**
+ * 逻辑错误处理
+ */
+export function handleLogicError(errCode: ResultEnum, errMsg?: string) {
+  switch (errCode) {
+      case ResultEnum.ERROR:
+        // TODO ERROR处理
+        // ...
+        break;
+      case ResultEnum.FAIL:
+        // TODO FAIL处理
+        // ...
+        break;
+  }
+  if (errMsg) {
+    Toast(errMsg);
+  }
+}

src/utils/http/index.ts

@@ -1,7 +1,7 @@
 import { createAlova } from 'alova';
 import AdapterUniapp from '@alova/adapter-uniapp';
 import { assign } from 'lodash-es';
-import { checkStatus } from './checkStatus';
+import { handleHttpStatus, handleLogicError } from './faultTolerance';
 import { getBaseUrl, isUseMock } from '@/utils/env';
 import { mockAdapter } from '@/mock';
 import { ContentTypeEnum, ResultEnum } from '@/enums/httpEnum';
@@ -28,7 +28,7 @@ const alovaInstance = createAlova({
     /* #endif */
   }),
   timeout: 5000,
-  beforeRequest: (method) => {
+  beforeRequest: async (method) => {
     method.config.headers = assign(method.config.headers, ContentType);
     const { config } = method;
     const ignoreAuth = !config.meta?.ignoreAuth;
@@ -57,17 +57,26 @@ const alovaInstance = createAlova({
         if (code === ResultEnum.SUCCESS) {
           return data as any;
         }
-        checkStatus(statusCode, message || '');
+        // 逻辑错误处理，与业务相关
+        handleLogicError(code, message);
         throw new Error(`请求错误[${code}]：${message}`);
       }
-      throw new Error(`请求错误[${statusCode}]：${errMsg}`);
+      // 处理http状态错误
+      handleHttpStatus(statusCode, message || '');
+      throw new Error(`HTTP请求错误[${statusCode}]：${errMsg}`);
     },
 
     /**
      * 请求失败的拦截器，请求错误时将会进入该拦截器。
      */
-    onError: (err) => {
+    onError: async (err) => {
-      throw new Error(`请求错误：${err}`);
+      throw new Error(`请求失败：${err}`);
+    },
+    /**
+     * 请求完成的拦截器, 无论请求成功或失败都会进入该拦截器
+     */
+    onComplete: async () => {
+      // 处理请求完成逻辑
     },
   },
 });