优化工作-1

2026-06-05 07:41:52 +08:00
parent b7ec5e2755
commit 0b9b0b5ea7
17 changed files with 1807 additions and 127 deletions
@@ -1,6 +1,7 @@
-import axios, { type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
+import axios, { type AxiosResponse, type InternalAxiosRequestConfig, type AxiosError } from 'axios'
 import { ElMessage } from 'element-plus'
 import { showToast } from 'vant'
+import { apiMonitor } from './monitor'

 function showError(message: string) {
  const isMobile = window.location.pathname.startsWith('/m')
@@ -14,6 +15,72 @@ function showError(message: string) {
 declare module 'axios' {
  export interface AxiosRequestConfig {
    silent?: boolean
+    skipErrorHandler?: boolean
+    showLoading?: boolean
+    _startTime?: number
+  }
+}
+
+// 开发环境日志记录
+function logRequest(config: InternalAxiosRequestConfig) {
+  if (import.meta.env.DEV) {
+    console.log(`[API Request] ${config.method?.toUpperCase()} ${config.url}`, {
+      params: config.params,
+      data: config.data,
+      headers: config.headers,
+    })
+  }
+
+  // 记录请求开始时间
+  config._startTime = Date.now()
+}
+
+function logResponse(response: AxiosResponse) {
+  if (import.meta.env.DEV) {
+    const duration = response.config._startTime
+      ? Date.now() - response.config._startTime
+      : 0
+    console.log(`[API Response] ${response.config.method?.toUpperCase()} ${response.config.url} (${duration}ms)`, {
+      status: response.status,
+      data: response.data,
+    })
+  }
+
+  // 记录性能指标
+  if (response.config._startTime) {
+    apiMonitor.record({
+      url: response.config.url || '',
+      method: response.config.method?.toUpperCase() || 'GET',
+      duration: Date.now() - response.config._startTime,
+      status: response.status,
+      timestamp: Date.now(),
+      success: true,
+    })
+  }
+}
+
+function logError(error: AxiosError) {
+  if (import.meta.env.DEV) {
+    const duration = error.config?._startTime
+      ? Date.now() - error.config._startTime
+      : 0
+    console.error(`[API Error] ${error.config?.method?.toUpperCase()} ${error.config?.url} (${duration}ms)`, {
+      status: error.response?.status,
+      message: error.message,
+      data: error.response?.data,
+    })
+  }
+
+  // 记录错误指标
+  if (error.config?._startTime) {
+    apiMonitor.record({
+      url: error.config.url || '',
+      method: error.config.method?.toUpperCase() || 'GET',
+      duration: Date.now() - error.config._startTime,
+      status: error.response?.status || 0,
+      timestamp: Date.now(),
+      success: false,
+    })
  }
 }

@@ -29,7 +96,10 @@ import type { ApiResponse } from '@/shared/types/types'

 export const apiClient = axios.create({
  baseURL: '/api',
-  timeout: 10000,
+  timeout: 30000, // 增加到 30 秒，避免大文件上传超时
+  headers: {
+    'Content-Type': 'application/json',
+  },
 })

 export async function unwrapData<T>(request: Promise<AxiosResponse<ApiResponse<T>>>) {
@@ -50,6 +120,8 @@ type RefreshState = {
 type RetriableRequestConfig = InternalAxiosRequestConfig & {
  _retry?: boolean
  silent?: boolean
+  skipErrorHandler?: boolean
+  showLoading?: boolean
 }

 const refreshStates: Record<AuthScope, RefreshState> = {
@@ -115,15 +187,30 @@ apiClient.interceptors.request.use((config) => {
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
+
+  // 记录请求日志
+  logRequest(config)
+
  return config
+}, (error) => {
+  logError(error)
+  return Promise.reject(error)
 })

 apiClient.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    // 记录响应日志
+    logResponse(response)
+    return response
+  },
  async (error) => {
+    // 记录错误日志
+    logError(error)
+
    const originalRequest = error.config as RetriableRequestConfig | undefined
    if (!originalRequest || error?.response?.status !== 401 || originalRequest._retry) {
-      if (originalRequest && !originalRequest.silent) {
+      // 统一错误处理，支持 skipErrorHandler 跳过
+      if (originalRequest && !originalRequest.silent && !originalRequest.skipErrorHandler) {
        const msg = error.response?.data?.message || error.message || '网络连接异常，请稍后重试'
        showError(msg)
      }
@@ -0,0 +1,142 @@
+/**
+ * API 辅助函数
+ * 提供类型安全的请求包装和通用错误处理
+ */
+
+import type { AxiosRequestConfig } from 'axios'
+import type { ApiResponse } from '@/shared/types/types'
+import { apiClient } from './client'
+
+/**
+ * 包装 API 请求，自动解包响应数据
+ */
+export async function request<T>(config: AxiosRequestConfig): Promise<T> {
+  const response = await apiClient.request<ApiResponse<T>>(config)
+  return response.data.data
+}
+
+/**
+ * GET 请求
+ */
+export async function get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+  return request<T>({ ...config, method: 'GET', url })
+}
+
+/**
+ * POST 请求
+ */
+export async function post<T>(
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request<T>({ ...config, method: 'POST', url, data })
+}
+
+/**
+ * PUT 请求
+ */
+export async function put<T>(
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request<T>({ ...config, method: 'PUT', url, data })
+}
+
+/**
+ * DELETE 请求
+ */
+export async function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+  return request<T>({ ...config, method: 'DELETE', url })
+}
+
+/**
+ * PATCH 请求
+ */
+export async function patch<T>(
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig
+): Promise<T> {
+  return request<T>({ ...config, method: 'PATCH', url, data })
+}
+
+/**
+ * 静默请求 (不显示错误提示)
+ */
+export async function silentRequest<T>(config: AxiosRequestConfig): Promise<T> {
+  return request<T>({ ...config, silent: true })
+}
+
+/**
+ * 带重试的请求
+ */
+export async function requestWithRetry<T>(
+  config: AxiosRequestConfig,
+  maxRetries = 3,
+  retryDelay = 1000
+): Promise<T> {
+  let lastError: Error | null = null
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await request<T>(config)
+    } catch (error) {
+      lastError = error as Error
+
+      // 最后一次尝试，不再重试
+      if (attempt === maxRetries) {
+        throw error
+      }
+
+      // 等待后重试
+      await new Promise((resolve) => setTimeout(resolve, retryDelay * (attempt + 1)))
+    }
+  }
+
+  throw lastError
+}
+
+/**
+ * 并发请求
+ */
+export async function concurrent<T extends readonly unknown[]>(
+  requests: readonly [...{ [K in keyof T]: Promise<T[K]> }]
+): Promise<T> {
+  return Promise.all(requests) as Promise<T>
+}
+
+/**
+ * 串行请求 (按顺序执行)
+ */
+export async function sequential<T>(
+  requestFns: Array<() => Promise<T>>
+): Promise<T[]> {
+  const results: T[] = []
+
+  for (const requestFn of requestFns) {
+    const result = await requestFn()
+    results.push(result)
+  }
+
+  return results
+}
+
+/**
+ * 导出所有辅助函数
+ */
+export const api = {
+  request,
+  get,
+  post,
+  put,
+  delete: del,
+  patch,
+  silent: silentRequest,
+  retry: requestWithRetry,
+  concurrent,
+  sequential,
+}
+
+export default api
@@ -1,3 +1,8 @@
 // API 基础设施
 export * from './client'
 export * from './files'
+export * from './helpers'
+export * from './monitor'
+
+// 默认导出 apiClient
+export { apiClient as default } from './client'
@@ -0,0 +1,136 @@
+/**
+ * API 性能监控
+ * 记录和分析 API 请求性能
+ */
+
+interface RequestMetrics {
+  url: string
+  method: string
+  duration: number
+  status: number
+  timestamp: number
+  success: boolean
+}
+
+class ApiMonitor {
+  private metrics: RequestMetrics[] = []
+  private maxMetrics = 100 // 只保留最近 100 条记录
+
+  /**
+   * 记录请求指标
+   */
+  record(metric: RequestMetrics) {
+    this.metrics.push(metric)
+
+    // 限制数组大小
+    if (this.metrics.length > this.maxMetrics) {
+      this.metrics.shift()
+    }
+
+    // 开发环境下，慢请求警告
+    if (import.meta.env.DEV && metric.duration > 1000) {
+      console.warn(`[API 慢请求] ${metric.method} ${metric.url} 耗时 ${metric.duration}ms`)
+    }
+  }
+
+  /**
+   * 获取所有指标
+   */
+  getMetrics(): RequestMetrics[] {
+    return [...this.metrics]
+  }
+
+  /**
+   * 获取平均响应时间
+   */
+  getAverageResponseTime(): number {
+    if (this.metrics.length === 0) return 0
+    const total = this.metrics.reduce((sum, m) => sum + m.duration, 0)
+    return Math.round(total / this.metrics.length)
+  }
+
+  /**
+   * 获取成功率
+   */
+  getSuccessRate(): number {
+    if (this.metrics.length === 0) return 100
+    const successCount = this.metrics.filter((m) => m.success).length
+    return Math.round((successCount / this.metrics.length) * 100)
+  }
+
+  /**
+   * 获取最慢的请求
+   */
+  getSlowestRequests(count = 5): RequestMetrics[] {
+    return [...this.metrics]
+      .sort((a, b) => b.duration - a.duration)
+      .slice(0, count)
+  }
+
+  /**
+   * 按 URL 分组统计
+   */
+  getStatsByUrl(): Record<string, { count: number; avgDuration: number; successRate: number }> {
+    const urlStats: Record<string, RequestMetrics[]> = {}
+
+    this.metrics.forEach((metric) => {
+      if (!urlStats[metric.url]) {
+        urlStats[metric.url] = []
+      }
+      urlStats[metric.url]!.push(metric)
+    })
+
+    const result: Record<string, { count: number; avgDuration: number; successRate: number }> = {}
+
+    Object.entries(urlStats).forEach(([url, metrics]) => {
+      const totalDuration = metrics.reduce((sum, m) => sum + m.duration, 0)
+      const successCount = metrics.filter((m) => m.success).length
+
+      result[url] = {
+        count: metrics.length,
+        avgDuration: Math.round(totalDuration / metrics.length),
+        successRate: Math.round((successCount / metrics.length) * 100),
+      }
+    })
+
+    return result
+  }
+
+  /**
+   * 清空指标
+   */
+  clear() {
+    this.metrics = []
+  }
+
+  /**
+   * 打印性能报告
+   */
+  printReport() {
+    console.group('📊 API 性能报告')
+    console.log('总请求数:', this.metrics.length)
+    console.log('平均响应时间:', this.getAverageResponseTime(), 'ms')
+    console.log('成功率:', this.getSuccessRate(), '%')
+    console.log('最慢的 5 个请求:')
+    console.table(
+      this.getSlowestRequests(5).map((m) => ({
+        方法: m.method,
+        URL: m.url,
+        耗时: `${m.duration}ms`,
+        状态: m.status,
+      }))
+    )
+    console.log('按 URL 统计:')
+    console.table(this.getStatsByUrl())
+    console.groupEnd()
+  }
+}
+
+// 导出单例
+export const apiMonitor = new ApiMonitor()
+
+// 开发环境下暴露到 window 对象，方便调试
+if (import.meta.env.DEV) {
+  ;(window as any).__apiMonitor = apiMonitor
+  console.log('💡 使用 __apiMonitor.printReport() 查看 API 性能报告')
+}