request请求封装

072843b7 · User · c1286178 · 072843b7 · 072843b7 · 072843b7
Commit 072843b7 authored Jun 19, 2025 by User
Hide whitespace changes
Inline Side-by-side

Showing with 90 additions and 2 deletions

index.html dist/index.html +2 -2

main.ts src/main.ts +4 -0

global-api.ts src/utils/global-api.ts +84 -0

No files found.
--- a/dist/index.html
+++ b/dist/index.html
 <!doctype html>
 <html lang="zh-cmn-Hans">
  <head>
-    <meta name="buildTime" content="2025-06-17 09:17:01">
+    <meta name="buildTime" content="2025-06-19 14:14:13">
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>VueDashboard</title>
-    <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-M4Qam_R_.js"></script>
+    <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-DIrm9V-K.js"></script>
    <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-B2SFJ6Fn.css">
  </head>
  <body>

--- a/src/main.ts
+++ b/src/main.ts
@@ -13,6 +13,7 @@ import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
 import { setupGlobalAxiosInterceptor, setupGlobalFetchInterceptor } from './utils/global-axios-interceptor';
+import { globalAPI } from './utils/global-api';
 import App from './App.vue';

 async function setupApp() {
@@ -30,6 +31,9 @@ async function setupApp() {
  setupGlobalAxiosInterceptor();
  setupGlobalFetchInterceptor();

+  // 全局注册API工具，确保所有请求都通过中间件
+  window.$api = globalAPI;
+
  app.use(VueGridLayout);
  app.use(MateChat);
  // 全局注册 wangeditor 组件

--- a/src/utils/global-api.ts
+++ b/src/utils/global-api.ts
+/** 全局API工具 统一管理所有HTTP请求，确保都通过中间件处理 */
+
+import { demoRequest, request } from '@/service/request';
+import type { RequestInstanceState } from '@/service/request/type';
+
+// 创建全局API对象，供动态组件使用
+export const globalAPI = {
+  // 标准请求实例（带完整中间件）
+  request,
+
+  // 演示请求实例
+  demoRequest,
+
+  // 便捷方法 - 封装常用HTTP方法
+  get: <T = any>(url: string, params?: any) => {
+    return request<T>({
+      method: 'GET',
+      url,
+      params
+    });
+  },
+
+  post: <T = any>(url: string, data?: any) => {
+    return request<T>({
+      method: 'POST',
+      url,
+      data
+    });
+  },
+
+  put: <T = any>(url: string, data?: any) => {
+    return request<T>({
+      method: 'PUT',
+      url,
+      data
+    });
+  },
+
+  delete: <T = any>(url: string, params?: any) => {
+    return request<T>({
+      method: 'DELETE',
+      url,
+      params
+    });
+  },
+
+  // 批量请求工具
+  batch: {
+    parallel: async <T = any>(requests: Array<() => Promise<T>>) => {
+      return Promise.all(requests.map(req => req()));
+    },
+
+    serial: async <T = any>(requests: Array<() => Promise<T>>) => {
+      const results: T[] = [];
+      for (const req of requests) {
+        const result = await req();
+        results.push(result);
+      }
+      return results;
+    }
+  },
+
+  // 状态管理
+  getState: (): RequestInstanceState => request.state,
+
+  // 请求取消
+  cancel: (requestId?: string) => {
+    if (requestId) {
+      request.cancelRequest(requestId);
+    } else {
+      request.cancelAllRequest();
+    }
+  }
+};
+
+// 类型定义
+export type GlobalAPI = typeof globalAPI;
+
+// 扩展window类型
+declare global {
+  interface Window {
+    $api: GlobalAPI;
+  }
+}