初始化

src/utils/http/alova/index.ts

@@ -0,0 +1,141 @@
+import { createAlova } from 'alova';
+import VueHook from 'alova/vue';
+import adapterFetch from 'alova/fetch';
+import { createAlovaMockAdapter } from '@alova/mock';
+import { isString } from 'lodash-es';
+import mocks from './mocks';
+import { useUser } from '@/store/modules/user';
+import { storage } from '@/utils/Storage';
+import { useGlobSetting } from '@/hooks/setting';
+import { PageEnum } from '@/enums/pageEnum';
+import { ResultEnum } from '@/enums/httpEnum';
+import { isUrl } from '@/utils';
+
+const { useMock, apiUrl, urlPrefix, loggerMock } = useGlobSetting();
+
+const mockAdapter = createAlovaMockAdapter([...mocks], {
+  // 全局控制是否启用mock接口，默认为true
+  enable: useMock,
+
+  // 非模拟请求适配器，用于未匹配mock接口时发送请求
+  httpAdapter: adapterFetch(),
+
+  // mock接口响应延迟，单位毫秒
+  delay: 1000,
+
+  // 自定义打印mock接口请求信息
+  // mockRequestLogger: (res) => {
+  //   loggerMock && console.log(`Mock Request ${res.url}`, res);
+  // },
+  mockRequestLogger: loggerMock,
+  onMockError(error, currentMethod) {
+    console.error('🚀 ~ onMockError ~ currentMethod:', currentMethod);
+    console.error('🚀 ~ onMockError ~ error:', error);
+  },
+});
+
+export const Alova = createAlova({
+  baseURL: apiUrl,
+  statesHook: VueHook,
+  // 关闭全局请求缓存
+  // cacheFor: null,
+  // 全局缓存配置
+  // cacheFor: {
+  //   POST: {
+  //     mode: 'memory',
+  //     expire: 60 * 10 * 1000
+  //   },
+  //   GET: {
+  //     mode: 'memory',
+  //     expire: 60 * 10 * 1000
+  //   },
+  //   HEAD: 60 * 10 * 1000 // 统一设置HEAD请求的缓存模式
+  // },
+  // 在开发环境开启缓存命中日志
+  cacheLogger: process.env.NODE_ENV === 'development',
+  requestAdapter: mockAdapter,
+  beforeRequest(method) {
+    const userStore = useUser();
+    const token = userStore.getToken;
+    // 添加 token 到请求头
+    if (!method.meta?.ignoreToken && token) {
+      method.config.headers['token'] = token;
+    }
+    // 处理 api 请求前缀
+    const isUrlStr = isUrl(method.url as string);
+    if (!isUrlStr && urlPrefix) {
+      method.url = `${urlPrefix}${method.url}`;
+    }
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
+      method.url = `${apiUrl}${method.url}`;
+    }
+  },
+  responded: {
+    onSuccess: async (response, method) => {
+      let res;
+      try {
+        if (response.json) {
+          const text = await response.text();
+          try {
+            res = JSON.parse(text);
+          } catch (e) {
+            console.error('解析响应失败，响应内容:', text);
+            console.error('响应状态:', response.status);
+            throw new Error('服务器返回了无效的响应，请检查后端API是否正常运行');
+          }
+        } else {
+          res = response.body;
+        }
+      } catch (error) {
+        console.error('请求失败:', error);
+        throw error;
+      }
+
+      // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+      if (method.meta?.isReturnNativeResponse) {
+        return res;
+      }
+      // 请根据自身情况修改数据结构
+      const { message, code, result } = res;
+
+      // 不进行任何处理，直接返回
+      // 用于需要直接获取 code、result、 message 这些信息时开启
+      if (method.meta?.isTransformResponse === false) {
+        return res.data;
+      }
+
+      // @ts-ignore
+      const Message = window.$message;
+      // @ts-ignore
+      const Modal = window.$dialog;
+
+      const LoginPath = PageEnum.BASE_LOGIN;
+      if (ResultEnum.SUCCESS === code) {
+        return result;
+      }
+      // 需要登录
+      if (code === 912) {
+        Modal?.warning({
+          title: '提示',
+          content: '登录身份已失效，请重新登录!',
+          okText: '确定',
+          closable: false,
+          maskClosable: false,
+          onOk: async () => {
+            storage.clear();
+            window.location.href = LoginPath;
+          },
+        });
+      } else {
+        // 可按需处理错误 一般情况下不是 912 错误，不一定需要弹出 message
+        Message?.error(message);
+        throw new Error(message);
+      }
+    },
+  },
+});
+
+// 项目，多个不同 api 地址，可导出多个实例
+// export const AlovaTwo = createAlova({
+//   baseURL: 'http://localhost:9001',
+// });

src/utils/http/alova/mocks.ts

@@ -0,0 +1,10 @@
+// 这里按需导入 mock 文件，只有在这里导入并导出，才会执行 mock 拦截
+// 跟根据实际开发情况配置
+import UserMock from '../../../../mock/user';
+import MenusMock from '../../../../mock/user/menus';
+import ConsoleMock from '../../../../mock/dashboard/console';
+import TableMock from '../../../../mock/table/list';
+import SystemMenuMock from '../../../../mock/system/menu';
+import SystemRoleMock from '../../../../mock/system/role';
+
+export default [UserMock, MenusMock, TableMock, ConsoleMock, SystemMenuMock, SystemRoleMock];