初始化
This commit is contained in:
182
saiadmin-artd/src/utils/http/error.ts
Normal file
182
saiadmin-artd/src/utils/http/error.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
/**
|
||||
* HTTP 错误处理模块
|
||||
*
|
||||
* 提供统一的 HTTP 请求错误处理机制
|
||||
*
|
||||
* ## 主要功能
|
||||
*
|
||||
* - 自定义 HttpError 错误类，封装错误信息、状态码、时间戳等
|
||||
* - 错误拦截和转换，将 Axios 错误转换为标准的 HttpError
|
||||
* - 错误消息国际化处理，根据状态码返回对应的多语言错误提示
|
||||
* - 错误日志记录，便于问题追踪和调试
|
||||
* - 错误和成功消息的统一展示
|
||||
* - 类型守卫函数，用于判断错误类型
|
||||
*
|
||||
* ## 使用场景
|
||||
*
|
||||
* - HTTP 请求拦截器中统一处理错误
|
||||
* - 业务代码中捕获和处理特定错误
|
||||
* - 错误日志收集和上报
|
||||
*
|
||||
* @module utils/http/error
|
||||
* @author Art Design Pro Team
|
||||
*/
|
||||
import { AxiosError } from 'axios'
|
||||
import { ApiStatus } from './status'
|
||||
import { $t } from '@/locales'
|
||||
|
||||
// 错误响应接口
|
||||
export interface ErrorResponse {
|
||||
/** 错误状态码 */
|
||||
code: number
|
||||
/** 错误消息 */
|
||||
msg: string
|
||||
/** 错误附加数据 */
|
||||
data?: unknown
|
||||
}
|
||||
|
||||
// 错误日志数据接口
|
||||
export interface ErrorLogData {
|
||||
/** 错误状态码 */
|
||||
code: number
|
||||
/** 错误消息 */
|
||||
message: string
|
||||
/** 错误附加数据 */
|
||||
data?: unknown
|
||||
/** 错误发生时间戳 */
|
||||
timestamp: string
|
||||
/** 请求 URL */
|
||||
url?: string
|
||||
/** 请求方法 */
|
||||
method?: string
|
||||
/** 错误堆栈信息 */
|
||||
stack?: string
|
||||
}
|
||||
|
||||
// 自定义 HttpError 类
|
||||
export class HttpError extends Error {
|
||||
public readonly code: number
|
||||
public readonly data?: unknown
|
||||
public readonly timestamp: string
|
||||
public readonly url?: string
|
||||
public readonly method?: string
|
||||
|
||||
constructor(
|
||||
message: string,
|
||||
code: number,
|
||||
options?: {
|
||||
data?: unknown
|
||||
url?: string
|
||||
method?: string
|
||||
}
|
||||
) {
|
||||
super(message)
|
||||
this.name = 'HttpError'
|
||||
this.code = code
|
||||
this.data = options?.data
|
||||
this.timestamp = new Date().toISOString()
|
||||
this.url = options?.url
|
||||
this.method = options?.method
|
||||
}
|
||||
|
||||
public toLogData(): ErrorLogData {
|
||||
return {
|
||||
code: this.code,
|
||||
message: this.message,
|
||||
data: this.data,
|
||||
timestamp: this.timestamp,
|
||||
url: this.url,
|
||||
method: this.method,
|
||||
stack: this.stack
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取错误消息
|
||||
* @param status 错误状态码
|
||||
* @returns 错误消息
|
||||
*/
|
||||
const getErrorMessage = (status: number): string => {
|
||||
const errorMap: Record<number, string> = {
|
||||
[ApiStatus.unauthorized]: 'httpMsg.unauthorized',
|
||||
[ApiStatus.forbidden]: 'httpMsg.forbidden',
|
||||
[ApiStatus.notFound]: 'httpMsg.notFound',
|
||||
[ApiStatus.methodNotAllowed]: 'httpMsg.methodNotAllowed',
|
||||
[ApiStatus.requestTimeout]: 'httpMsg.requestTimeout',
|
||||
[ApiStatus.internalServerError]: 'httpMsg.internalServerError',
|
||||
[ApiStatus.badGateway]: 'httpMsg.badGateway',
|
||||
[ApiStatus.serviceUnavailable]: 'httpMsg.serviceUnavailable',
|
||||
[ApiStatus.gatewayTimeout]: 'httpMsg.gatewayTimeout'
|
||||
}
|
||||
|
||||
return $t(errorMap[status] || 'httpMsg.internalServerError')
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理错误
|
||||
* @param error 错误对象
|
||||
* @returns 错误对象
|
||||
*/
|
||||
export function handleError(error: AxiosError<ErrorResponse>): never {
|
||||
// 处理取消的请求
|
||||
if (error.code === 'ERR_CANCELED') {
|
||||
console.warn('Request cancelled:', error.message)
|
||||
throw new HttpError($t('httpMsg.requestCancelled'), ApiStatus.error)
|
||||
}
|
||||
|
||||
const statusCode = error.response?.status
|
||||
const errorMessage = error.response?.data?.msg || error.message
|
||||
const requestConfig = error.config
|
||||
|
||||
// 处理网络错误
|
||||
if (!error.response) {
|
||||
throw new HttpError($t('httpMsg.networkError'), ApiStatus.error, {
|
||||
url: requestConfig?.url,
|
||||
method: requestConfig?.method?.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
// 处理 HTTP 状态码错误
|
||||
const message = statusCode
|
||||
? getErrorMessage(statusCode)
|
||||
: errorMessage || $t('httpMsg.requestFailed')
|
||||
throw new HttpError(message, statusCode || ApiStatus.error, {
|
||||
data: error.response.data,
|
||||
url: requestConfig?.url,
|
||||
method: requestConfig?.method?.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示错误消息
|
||||
* @param error 错误对象
|
||||
* @param showMessage 是否显示错误消息
|
||||
*/
|
||||
export function showError(error: HttpError, showMessage: boolean = true): void {
|
||||
if (showMessage) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
// 记录错误日志
|
||||
// console.error('[HTTP Error]', error.toLogData())
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示成功消息
|
||||
* @param message 成功消息
|
||||
* @param showMessage 是否显示消息
|
||||
*/
|
||||
export function showSuccess(message: string, showMessage: boolean = true): void {
|
||||
if (showMessage) {
|
||||
ElMessage.success(message)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为 HttpError 类型
|
||||
* @param error 错误对象
|
||||
* @returns 是否为 HttpError 类型
|
||||
*/
|
||||
export const isHttpError = (error: unknown): error is HttpError => {
|
||||
return error instanceof HttpError
|
||||
}
|
||||
217
saiadmin-artd/src/utils/http/index.ts
Normal file
217
saiadmin-artd/src/utils/http/index.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* HTTP 请求封装模块
|
||||
* 基于 Axios 封装的 HTTP 请求工具，提供统一的请求/响应处理
|
||||
*
|
||||
* ## 主要功能
|
||||
*
|
||||
* - 请求/响应拦截器（自动添加 Token、统一错误处理）
|
||||
* - 401 未授权自动登出（带防抖机制）
|
||||
* - 请求失败自动重试（可配置）
|
||||
* - 统一的成功/错误消息提示
|
||||
* - 支持 GET/POST/PUT/DELETE 等常用方法
|
||||
*
|
||||
* @module utils/http
|
||||
* @author Art Design Pro Team
|
||||
*/
|
||||
|
||||
import axios, { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { ApiStatus } from './status'
|
||||
import { HttpError, handleError, showError, showSuccess } from './error'
|
||||
import { $t } from '@/locales'
|
||||
import { BaseResponse } from '@/types'
|
||||
|
||||
/** 请求配置常量 */
|
||||
const REQUEST_TIMEOUT = 15000
|
||||
const LOGOUT_DELAY = 500
|
||||
const MAX_RETRIES = 0
|
||||
const RETRY_DELAY = 1000
|
||||
const UNAUTHORIZED_DEBOUNCE_TIME = 3000
|
||||
|
||||
/** 401防抖状态 */
|
||||
let isUnauthorizedErrorShown = false
|
||||
let unauthorizedTimer: NodeJS.Timeout | null = null
|
||||
|
||||
/** 扩展 AxiosRequestConfig */
|
||||
interface ExtendedAxiosRequestConfig extends AxiosRequestConfig {
|
||||
showErrorMessage?: boolean
|
||||
showSuccessMessage?: boolean
|
||||
}
|
||||
|
||||
const { VITE_API_URL, VITE_WITH_CREDENTIALS } = import.meta.env
|
||||
|
||||
/** Axios实例 */
|
||||
const axiosInstance = axios.create({
|
||||
timeout: REQUEST_TIMEOUT,
|
||||
baseURL: VITE_API_URL,
|
||||
withCredentials: VITE_WITH_CREDENTIALS === 'true',
|
||||
validateStatus: (status) => status >= 200 && status < 300,
|
||||
transformResponse: [
|
||||
(data, headers) => {
|
||||
const contentType = headers['content-type']
|
||||
if (contentType?.includes('application/json')) {
|
||||
try {
|
||||
return JSON.parse(data)
|
||||
} catch {
|
||||
return data
|
||||
}
|
||||
}
|
||||
return data
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/** 请求拦截器 */
|
||||
axiosInstance.interceptors.request.use(
|
||||
(request: InternalAxiosRequestConfig) => {
|
||||
const { accessToken } = useUserStore()
|
||||
if (accessToken) request.headers.set('Authorization', `Bearer ` + accessToken)
|
||||
|
||||
if (request.data && !(request.data instanceof FormData) && !request.headers['Content-Type']) {
|
||||
request.headers.set('Content-Type', 'application/json')
|
||||
request.data = JSON.stringify(request.data)
|
||||
}
|
||||
|
||||
return request
|
||||
},
|
||||
(error) => {
|
||||
showError(createHttpError($t('httpMsg.requestConfigError'), ApiStatus.error))
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
/** 响应拦截器 */
|
||||
axiosInstance.interceptors.response.use(
|
||||
(response: AxiosResponse<BaseResponse>) => {
|
||||
if (response.config.responseType === 'blob') return response
|
||||
const { code, message } = response.data
|
||||
if (code === ApiStatus.success) return response
|
||||
if (code === ApiStatus.unauthorized) handleUnauthorizedError(message)
|
||||
throw createHttpError(message || $t('httpMsg.requestFailed'), code)
|
||||
},
|
||||
(error) => {
|
||||
if (error.response?.status === ApiStatus.unauthorized) handleUnauthorizedError()
|
||||
return Promise.reject(handleError(error))
|
||||
}
|
||||
)
|
||||
|
||||
/** 统一创建HttpError */
|
||||
function createHttpError(message: string, code: number) {
|
||||
return new HttpError(message, code)
|
||||
}
|
||||
|
||||
/** 处理401错误（带防抖） */
|
||||
function handleUnauthorizedError(message?: string): never {
|
||||
const error = createHttpError(message || $t('httpMsg.unauthorized'), ApiStatus.unauthorized)
|
||||
|
||||
if (!isUnauthorizedErrorShown) {
|
||||
isUnauthorizedErrorShown = true
|
||||
logOut()
|
||||
|
||||
unauthorizedTimer = setTimeout(resetUnauthorizedError, UNAUTHORIZED_DEBOUNCE_TIME)
|
||||
|
||||
showError(error, true)
|
||||
throw error
|
||||
}
|
||||
|
||||
throw error
|
||||
}
|
||||
|
||||
/** 重置401防抖状态 */
|
||||
function resetUnauthorizedError() {
|
||||
isUnauthorizedErrorShown = false
|
||||
if (unauthorizedTimer) clearTimeout(unauthorizedTimer)
|
||||
unauthorizedTimer = null
|
||||
}
|
||||
|
||||
/** 退出登录函数 */
|
||||
function logOut() {
|
||||
setTimeout(() => {
|
||||
useUserStore().logOut()
|
||||
}, LOGOUT_DELAY)
|
||||
}
|
||||
|
||||
/** 是否需要重试 */
|
||||
function shouldRetry(statusCode: number) {
|
||||
return [
|
||||
ApiStatus.requestTimeout,
|
||||
ApiStatus.internalServerError,
|
||||
ApiStatus.badGateway,
|
||||
ApiStatus.serviceUnavailable,
|
||||
ApiStatus.gatewayTimeout
|
||||
].includes(statusCode)
|
||||
}
|
||||
|
||||
/** 请求重试逻辑 */
|
||||
async function retryRequest<T>(
|
||||
config: ExtendedAxiosRequestConfig,
|
||||
retries: number = MAX_RETRIES
|
||||
): Promise<T> {
|
||||
try {
|
||||
return await request<T>(config)
|
||||
} catch (error) {
|
||||
if (retries > 0 && error instanceof HttpError && shouldRetry(error.code)) {
|
||||
await delay(RETRY_DELAY)
|
||||
return retryRequest<T>(config, retries - 1)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/** 延迟函数 */
|
||||
function delay(ms: number) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
/** 请求函数 */
|
||||
async function request<T = any>(config: ExtendedAxiosRequestConfig): Promise<T> {
|
||||
// POST | PUT 参数自动填充
|
||||
if (
|
||||
['POST', 'PUT'].includes(config.method?.toUpperCase() || '') &&
|
||||
config.params &&
|
||||
!config.data
|
||||
) {
|
||||
config.data = config.params
|
||||
config.params = undefined
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await axiosInstance.request<BaseResponse<T>>(config)
|
||||
|
||||
// 显示成功消息
|
||||
if (config.showSuccessMessage && res.data.message) {
|
||||
showSuccess(res.data.message)
|
||||
}
|
||||
|
||||
if (config.responseType === 'blob') return res.data as T
|
||||
|
||||
return res.data.data as T
|
||||
} catch (error) {
|
||||
if (error instanceof HttpError && error.code !== ApiStatus.unauthorized) {
|
||||
const showMsg = config.showErrorMessage !== false
|
||||
showError(error, showMsg)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
/** API方法集合 */
|
||||
const api = {
|
||||
get<T>(config: ExtendedAxiosRequestConfig) {
|
||||
return retryRequest<T>({ ...config, method: 'GET' })
|
||||
},
|
||||
post<T>(config: ExtendedAxiosRequestConfig) {
|
||||
return retryRequest<T>({ ...config, method: 'POST' })
|
||||
},
|
||||
put<T>(config: ExtendedAxiosRequestConfig) {
|
||||
return retryRequest<T>({ ...config, method: 'PUT' })
|
||||
},
|
||||
del<T>(config: ExtendedAxiosRequestConfig) {
|
||||
return retryRequest<T>({ ...config, method: 'DELETE' })
|
||||
},
|
||||
request<T>(config: ExtendedAxiosRequestConfig) {
|
||||
return retryRequest<T>(config)
|
||||
}
|
||||
}
|
||||
|
||||
export default api
|
||||
18
saiadmin-artd/src/utils/http/status.ts
Normal file
18
saiadmin-artd/src/utils/http/status.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* 接口状态码
|
||||
*/
|
||||
export enum ApiStatus {
|
||||
success = 200, // 成功
|
||||
error = 400, // 错误
|
||||
unauthorized = 401, // 未授权
|
||||
forbidden = 403, // 禁止访问
|
||||
notFound = 404, // 未找到
|
||||
methodNotAllowed = 405, // 方法不允许
|
||||
requestTimeout = 408, // 请求超时
|
||||
internalServerError = 500, // 服务器错误
|
||||
notImplemented = 501, // 未实现
|
||||
badGateway = 502, // 网关错误
|
||||
serviceUnavailable = 503, // 服务不可用
|
||||
gatewayTimeout = 504, // 网关超时
|
||||
httpVersionNotSupported = 505 // HTTP版本不支持
|
||||
}
|
||||
Reference in New Issue
Block a user