Skip to content

V
Vue-Dashboard
Commit 74076394 by User
Options

request请求封装

parent 37f5db10
Showing with 96 additions and 4 deletions
dist/index.html
<!doctype html> <!doctype html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head> <head>
<meta name="buildTime" content="2025-06-10 15:32:11"> <meta name="buildTime" content="2025-06-19 14:14:13">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" /> <link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>VueDashboard</title> <title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-BV5IaHCk.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-BFEuYhFr.css"> <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-B2SFJ6Fn.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/main.ts
...@@ -8,7 +8,6 @@ import * as echarts from 'echarts/core'; ...@@ -8,7 +8,6 @@ import * as echarts from 'echarts/core';
import WangEditor from 'wangeditor'; import WangEditor from 'wangeditor';
import axiosInstance from '@/service/request/axios'; import axiosInstance from '@/service/request/axios';
import './plugins/assets'; import './plugins/assets';
import { localStg } from '@/utils/storage';
// main.js or main.ts // main.js or main.ts
import 'font-awesome/css/font-awesome.css'; import 'font-awesome/css/font-awesome.css';
// 引入 KaTeX 样式以支持数学公式渲染 // 引入 KaTeX 样式以支持数学公式渲染
...@@ -17,6 +16,8 @@ import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from '. ...@@ -17,6 +16,8 @@ import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from '.
import { setupStore } from './store'; import { setupStore } from './store';
import { setupRouter } from './router'; import { setupRouter } from './router';
import { setupI18n } from './locales'; import { setupI18n } from './locales';
// import { setupGlobalAxiosInterceptor, setupGlobalFetchInterceptor } from './utils/global-axios-interceptor';
import { globalAPI } from './utils/global-api';
import App from './App.vue'; import App from './App.vue';
// let timeoutHandle: string | number | NodeJS.Timeout | undefined; // let timeoutHandle: string | number | NodeJS.Timeout | undefined;
...@@ -90,6 +91,13 @@ async function setupApp() { ...@@ -90,6 +91,13 @@ async function setupApp() {
// 启动计时器 // 启动计时器
// startInactivityTimer(app); // startInactivityTimer(app);
// 设置全局401错误拦截器
// setupGlobalAxiosInterceptor();
// setupGlobalFetchInterceptor();
// 全局注册API工具，确保所有请求都通过中间件
window.$api = globalAPI;
app.use(VueGridLayout); app.use(VueGridLayout);
app.use(MateChat); app.use(MateChat);
......
src/utils/global-api.ts 0 → 100644
/** 全局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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment