mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-20 14:05:06 +08:00
refactor: vue3 axios api ...
This commit is contained in:
xingyu
@ -1,287 +0,0 @@
|
||||
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios'
|
||||
import type { RequestOptions, RequestResult, UploadFileParams } from 'types/axios'
|
||||
import type { CreateAxiosOptions } from './axiosTransform'
|
||||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
import { AxiosCanceler } from './axiosCancel'
|
||||
import { isFunction } from '@/utils/is'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { ContentTypeEnum } from '@/enums/http.enum'
|
||||
import { RequestEnum } from '@/enums/http.enum'
|
||||
import { downloadByData } from '@/utils/filt'
|
||||
|
||||
export * from './axiosTransform'
|
||||
|
||||
/**
|
||||
* @description: axios module
|
||||
*/
|
||||
export class VAxios {
|
||||
private axiosInstance: AxiosInstance
|
||||
private readonly options: CreateAxiosOptions
|
||||
|
||||
constructor(options: CreateAxiosOptions) {
|
||||
this.options = options
|
||||
this.axiosInstance = axios.create(options)
|
||||
this.setupInterceptors()
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: Create axios instance
|
||||
*/
|
||||
private createAxios(config: CreateAxiosOptions): void {
|
||||
this.axiosInstance = axios.create(config)
|
||||
}
|
||||
|
||||
private getTransform() {
|
||||
const { transform } = this.options
|
||||
return transform
|
||||
}
|
||||
|
||||
getAxios(): AxiosInstance {
|
||||
return this.axiosInstance
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: Reconfigure axios
|
||||
*/
|
||||
configAxios(config: CreateAxiosOptions) {
|
||||
if (!this.axiosInstance) {
|
||||
return
|
||||
}
|
||||
this.createAxios(config)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: Set general header
|
||||
*/
|
||||
setHeader(headers: any): void {
|
||||
if (!this.axiosInstance) {
|
||||
return
|
||||
}
|
||||
Object.assign(this.axiosInstance.defaults.headers, headers)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: Interceptor configuration
|
||||
*/
|
||||
private setupInterceptors() {
|
||||
const transform = this.getTransform()
|
||||
if (!transform) {
|
||||
return
|
||||
}
|
||||
const {
|
||||
requestInterceptors,
|
||||
requestInterceptorsCatch,
|
||||
responseInterceptors,
|
||||
responseInterceptorsCatch
|
||||
} = transform
|
||||
|
||||
const axiosCanceler = new AxiosCanceler()
|
||||
|
||||
// Request interceptor configuration processing
|
||||
this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
|
||||
// If cancel repeat request is turned on, then cancel repeat request is prohibited
|
||||
const {
|
||||
// @ts-ignore
|
||||
headers: { ignoreCancelToken }
|
||||
} = config
|
||||
|
||||
const ignoreCancel =
|
||||
ignoreCancelToken !== undefined
|
||||
? ignoreCancelToken
|
||||
: this.options.requestOptions?.ignoreCancelToken
|
||||
|
||||
!ignoreCancel && axiosCanceler.addPending(config)
|
||||
if (requestInterceptors && isFunction(requestInterceptors)) {
|
||||
config = requestInterceptors(config, this.options)
|
||||
}
|
||||
return config
|
||||
}, undefined)
|
||||
|
||||
// Request interceptor error capture
|
||||
requestInterceptorsCatch &&
|
||||
isFunction(requestInterceptorsCatch) &&
|
||||
this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch)
|
||||
|
||||
// Response result interceptor processing
|
||||
this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
|
||||
res && axiosCanceler.removePending(res.config)
|
||||
if (responseInterceptors && isFunction(responseInterceptors)) {
|
||||
res = responseInterceptors(res)
|
||||
}
|
||||
return res
|
||||
}, undefined)
|
||||
|
||||
// Response result interceptor error capture
|
||||
responseInterceptorsCatch &&
|
||||
isFunction(responseInterceptorsCatch) &&
|
||||
this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: File Upload
|
||||
*/
|
||||
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
|
||||
const formData = new window.FormData()
|
||||
const customFilename = params.name || 'file'
|
||||
|
||||
if (params.filename) {
|
||||
formData.append(customFilename, params.file, params.filename)
|
||||
} else {
|
||||
formData.append(customFilename, params.file)
|
||||
}
|
||||
|
||||
if (params.data) {
|
||||
Object.keys(params.data).forEach((key) => {
|
||||
const value = params.data![key]
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
formData.append(`${key}[]`, item)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
formData.append(key, params.data![key])
|
||||
})
|
||||
}
|
||||
return this.axiosInstance.request<T>({
|
||||
...config,
|
||||
method: 'POST',
|
||||
data: {
|
||||
file: formData
|
||||
},
|
||||
headers: {
|
||||
'Content-type': ContentTypeEnum.FORM_DATA,
|
||||
// @ts-ignore
|
||||
ignoreCancelToken: true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// support form-data
|
||||
supportFormData(config: AxiosRequestConfig) {
|
||||
const headers = config.headers || this.options.headers
|
||||
const contentType = headers?.['Content-Type'] || headers?.['content-type']
|
||||
|
||||
if (
|
||||
contentType !== ContentTypeEnum.FORM_URLENCODED ||
|
||||
!Reflect.has(config, 'data') ||
|
||||
config.method?.toUpperCase() === RequestEnum.GET
|
||||
) {
|
||||
return config
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
data: qs.stringify(config.data, { arrayFormat: 'brackets' })
|
||||
}
|
||||
}
|
||||
|
||||
get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
return this.request({ ...config, method: 'GET' }, options)
|
||||
}
|
||||
|
||||
post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
return this.request({ ...config, method: 'POST' }, options)
|
||||
}
|
||||
|
||||
put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
return this.request({ ...config, method: 'PUT' }, options)
|
||||
}
|
||||
|
||||
delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
return this.request({ ...config, method: 'DELETE' }, options)
|
||||
}
|
||||
|
||||
download<T = any>(
|
||||
config: AxiosRequestConfig,
|
||||
title: string,
|
||||
options?: RequestOptions
|
||||
): Promise<T> {
|
||||
let conf: CreateAxiosOptions = cloneDeep({
|
||||
...config,
|
||||
method: 'GET',
|
||||
responseType: 'blob'
|
||||
})
|
||||
const transform = this.getTransform()
|
||||
|
||||
const { requestOptions } = this.options
|
||||
|
||||
const opt: RequestOptions = Object.assign({}, requestOptions, options)
|
||||
|
||||
const { beforeRequestHook, requestCatchHook } = transform || {}
|
||||
|
||||
if (beforeRequestHook && isFunction(beforeRequestHook)) {
|
||||
conf = beforeRequestHook(conf, opt)
|
||||
}
|
||||
conf.requestOptions = opt
|
||||
|
||||
conf = this.supportFormData(conf)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axiosInstance
|
||||
.request<any, AxiosResponse<RequestResult>>(conf)
|
||||
.then((res: AxiosResponse<RequestResult>) => {
|
||||
resolve(res as unknown as Promise<T>)
|
||||
// download file
|
||||
if (typeof res != undefined) {
|
||||
downloadByData(res?.data as unknown as BlobPart, title)
|
||||
}
|
||||
})
|
||||
.catch((e: Error | AxiosError) => {
|
||||
if (requestCatchHook && isFunction(requestCatchHook)) {
|
||||
reject(requestCatchHook(e, opt))
|
||||
return
|
||||
}
|
||||
if (axios.isAxiosError(e)) {
|
||||
// rewrite error message from axios in here
|
||||
}
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||
let conf: CreateAxiosOptions = cloneDeep(config)
|
||||
const transform = this.getTransform()
|
||||
|
||||
const { requestOptions } = this.options
|
||||
|
||||
const opt: RequestOptions = Object.assign({}, requestOptions, options)
|
||||
|
||||
const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {}
|
||||
if (beforeRequestHook && isFunction(beforeRequestHook)) {
|
||||
conf = beforeRequestHook(conf, opt)
|
||||
}
|
||||
conf.requestOptions = opt
|
||||
|
||||
conf = this.supportFormData(conf)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axiosInstance
|
||||
.request<any, AxiosResponse<RequestResult>>(conf)
|
||||
.then((res: AxiosResponse<RequestResult>) => {
|
||||
if (transformRequestHook && isFunction(transformRequestHook)) {
|
||||
try {
|
||||
const ret = transformRequestHook(res, opt)
|
||||
resolve(ret)
|
||||
} catch (err) {
|
||||
reject(err || new Error('request error!'))
|
||||
}
|
||||
return
|
||||
}
|
||||
resolve(res as unknown as Promise<T>)
|
||||
})
|
||||
.catch((e: Error | AxiosError) => {
|
||||
if (requestCatchHook && isFunction(requestCatchHook)) {
|
||||
reject(requestCatchHook(e, opt))
|
||||
return
|
||||
}
|
||||
if (axios.isAxiosError(e)) {
|
||||
// rewrite error message from axios in here
|
||||
}
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
import type { AxiosRequestConfig, Canceler } from 'axios'
|
||||
import axios from 'axios'
|
||||
import { isFunction } from '@/utils/is'
|
||||
|
||||
// 用于存储每个请求的标识和取消功能
|
||||
let pendingMap = new Map<string, Canceler>()
|
||||
|
||||
export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&')
|
||||
|
||||
export class AxiosCanceler {
|
||||
/**
|
||||
* 添加请求
|
||||
* @param {Object} config
|
||||
*/
|
||||
addPending(config: AxiosRequestConfig) {
|
||||
this.removePending(config)
|
||||
const url = getPendingUrl(config)
|
||||
config.cancelToken =
|
||||
config.cancelToken ||
|
||||
new axios.CancelToken((cancel) => {
|
||||
if (!pendingMap.has(url)) {
|
||||
// If there is no current request in pending, add it
|
||||
pendingMap.set(url, cancel)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 清除所有待处理的
|
||||
*/
|
||||
removeAllPending() {
|
||||
pendingMap.forEach((cancel) => {
|
||||
cancel && isFunction(cancel) && cancel()
|
||||
})
|
||||
pendingMap.clear()
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除请求
|
||||
* @param {Object} config
|
||||
*/
|
||||
removePending(config: AxiosRequestConfig) {
|
||||
const url = getPendingUrl(config)
|
||||
|
||||
if (pendingMap.has(url)) {
|
||||
// 如果挂起中有当前请求标识符，则需要取消并删除当前请求
|
||||
const cancel = pendingMap.get(url)
|
||||
cancel && cancel(url)
|
||||
pendingMap.delete(url)
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置 */
|
||||
reset(): void {
|
||||
pendingMap = new Map<string, Canceler>()
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
/** 数据处理类，可根据项目配置 */
|
||||
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||
import type { RequestOptions, RequestResult } from 'types/axios'
|
||||
|
||||
export interface CreateAxiosOptions extends AxiosRequestConfig {
|
||||
authenticationScheme?: string
|
||||
transform?: AxiosTransform
|
||||
requestOptions?: RequestOptions
|
||||
}
|
||||
|
||||
export abstract class AxiosTransform {
|
||||
/** 请求前的流程配置 */
|
||||
beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig
|
||||
|
||||
/** 请求成功处理 */
|
||||
transformRequestHook?: (res: AxiosResponse<RequestResult>, options: RequestOptions) => any
|
||||
|
||||
/** 请求失败处理 */
|
||||
requestCatchHook?: (e: Error, options: RequestOptions) => Promise<any>
|
||||
|
||||
/** 请求之前的拦截器 */
|
||||
requestInterceptors?: (
|
||||
config: AxiosRequestConfig,
|
||||
options: CreateAxiosOptions
|
||||
) => AxiosRequestConfig
|
||||
|
||||
/** 请求之后的拦截器 */
|
||||
responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>
|
||||
|
||||
/** 请求之前的拦截器错误处理 */
|
||||
requestInterceptorsCatch?: (error: Error) => void
|
||||
|
||||
/** 请求之后的拦截器错误处理 */
|
||||
responseInterceptorsCatch?: (error: Error) => void
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
import type { ErrorMessageMode } from 'types/axios'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
|
||||
const { wsCache } = useCache()
|
||||
|
||||
export function checkStatus(
|
||||
status: number,
|
||||
msg: string,
|
||||
errorMessageMode: ErrorMessageMode = 'message'
|
||||
): void {
|
||||
const { t } = useI18n()
|
||||
let errMessage = ''
|
||||
|
||||
switch (status) {
|
||||
case 400:
|
||||
errMessage = `${msg}`
|
||||
break
|
||||
// 401: Not logged in
|
||||
// 如果未登录，跳转到登录页面，并携带当前页面的路径
|
||||
// 成功登录后返回当前页面。此步骤需要在登录页面上操作。
|
||||
case 401:
|
||||
wsCache.clear()
|
||||
errMessage = msg || t('sys.api.errMsg401')
|
||||
break
|
||||
case 403:
|
||||
errMessage = t('sys.api.errMsg403')
|
||||
break
|
||||
// 404请求不存在
|
||||
case 404:
|
||||
errMessage = t('sys.api.errMsg404')
|
||||
break
|
||||
case 405:
|
||||
errMessage = t('sys.api.errMsg405')
|
||||
break
|
||||
case 408:
|
||||
errMessage = t('sys.api.errMsg408')
|
||||
break
|
||||
case 500:
|
||||
errMessage = t('sys.api.errMsg500')
|
||||
break
|
||||
case 501:
|
||||
errMessage = t('sys.api.errMsg501')
|
||||
break
|
||||
case 502:
|
||||
errMessage = t('sys.api.errMsg502')
|
||||
break
|
||||
case 503:
|
||||
errMessage = t('sys.api.errMsg503')
|
||||
break
|
||||
case 504:
|
||||
errMessage = t('sys.api.errMsg504')
|
||||
break
|
||||
case 505:
|
||||
errMessage = t('sys.api.errMsg505')
|
||||
break
|
||||
case 901:
|
||||
errMessage = t('sys.api.errMsg505')
|
||||
break
|
||||
default:
|
||||
}
|
||||
|
||||
if (errMessage) {
|
||||
if (errorMessageMode === 'modal') {
|
||||
ElMessageBox.confirm(errMessage, {
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
} else if (errorMessageMode === 'message') {
|
||||
ElMessage.error(errMessage)
|
||||
}
|
||||
}
|
||||
}
|
||||
46
yudao-ui-admin-vue3/src/config/axios/config.ts
Normal file
46
yudao-ui-admin-vue3/src/config/axios/config.ts
Normal file
@ -0,0 +1,46 @@
|
||||
const config: {
|
||||
base_url: {
|
||||
base: string
|
||||
dev: string
|
||||
pro: string
|
||||
test: string
|
||||
}
|
||||
result_code: number | string
|
||||
default_headers: AxiosHeaders
|
||||
request_timeout: number
|
||||
} = {
|
||||
/**
|
||||
* api请求基础路径
|
||||
*/
|
||||
base_url: {
|
||||
// 开发环境接口前缀
|
||||
base: '',
|
||||
|
||||
// 打包开发环境接口前缀
|
||||
dev: '',
|
||||
|
||||
// 打包生产环境接口前缀
|
||||
pro: '',
|
||||
|
||||
// 打包测试环境接口前缀
|
||||
test: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 接口成功返回状态码
|
||||
*/
|
||||
result_code: 200,
|
||||
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 30000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
* 可选值：application/x-www-form-urlencoded multipart/form-data
|
||||
*/
|
||||
default_headers: 'application/json'
|
||||
}
|
||||
|
||||
export { config }
|
||||
6
yudao-ui-admin-vue3/src/config/axios/errorCode.ts
Normal file
6
yudao-ui-admin-vue3/src/config/axios/errorCode.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
'401': '认证失败，无法访问系统资源',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
default: '系统未知错误，请反馈给管理员'
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import { isObject, isString } from '@/utils/is'
|
||||
|
||||
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
|
||||
|
||||
export function joinTimestamp<T extends boolean>(
|
||||
join: boolean,
|
||||
restful: T
|
||||
): T extends true ? string : object
|
||||
|
||||
export function joinTimestamp(join: boolean, restful = false): string | object {
|
||||
if (!join) {
|
||||
return restful ? '' : {}
|
||||
}
|
||||
const now = new Date().getTime()
|
||||
if (restful) {
|
||||
return `?_t=${now}`
|
||||
}
|
||||
return { _t: now }
|
||||
}
|
||||
|
||||
/** 格式化请求参数中的时间 */
|
||||
export function formatRequestDate(params: Recordable) {
|
||||
if (Object.prototype.toString.call(params) !== '[object Object]') {
|
||||
return
|
||||
}
|
||||
|
||||
for (const key in params) {
|
||||
if (params[key] && params[key]._isAMomentObject) {
|
||||
params[key] = params[key].format(DATE_TIME_FORMAT)
|
||||
}
|
||||
if (isString(key)) {
|
||||
const value = params[key]
|
||||
if (value) {
|
||||
try {
|
||||
params[key] = isString(value) ? value.trim() : value
|
||||
} catch (error: any) {
|
||||
throw new Error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isObject(params[key])) {
|
||||
formatRequestDate(params[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,280 +1,148 @@
|
||||
// axios配置 可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
|
||||
// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
|
||||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import qs from 'qs'
|
||||
import { config } from '@/config/axios/config'
|
||||
import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth'
|
||||
import errorCode from './errorCode'
|
||||
|
||||
import type { AxiosResponse } from 'axios'
|
||||
import type { RequestOptions, RequestResult } from 'types/axios'
|
||||
import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'
|
||||
import { VAxios } from './Axios'
|
||||
import { checkStatus } from './checkStatus'
|
||||
import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/http.enum'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { isString } from '@/utils/is'
|
||||
import { getAccessToken, setToken } from '@/utils/auth'
|
||||
import { setObjToUrlParams, deepMerge } from './utils'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { joinTimestamp, formatRequestDate } from './helper'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { refreshToken } from '@/api/login'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { wsCache } = useCache()
|
||||
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
|
||||
const BASE_URL = import.meta.env.VITE_BASE_URL
|
||||
const BASE_API = import.meta.env.VITE_API_URL
|
||||
const apiUrl = BASE_URL + BASE_API
|
||||
const { result_code, base_url } = config
|
||||
|
||||
// 需要忽略的提示。忽略后，自动 Promise.reject('error')
|
||||
const ignoreMsgs = [
|
||||
'无效的刷新令牌', // 刷新令牌被删除时，不用提示
|
||||
'刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
|
||||
]
|
||||
// 是否显示重新登录
|
||||
// export let isRelogin = { show: false }
|
||||
// TODO 请求队列
|
||||
// let requestList = []
|
||||
export const isRelogin = { show: false }
|
||||
// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
|
||||
// 是否正在刷新中
|
||||
let isRefreshToken = false
|
||||
/**
|
||||
* @description: 数据处理，方便区分多种处理方式
|
||||
*/
|
||||
const transform: AxiosTransform = {
|
||||
/**
|
||||
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
|
||||
*/
|
||||
transformRequestHook: async (res: AxiosResponse<RequestResult>, options: RequestOptions) => {
|
||||
const { isTransformResponse, isReturnNativeResponse } = options
|
||||
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||
if (isReturnNativeResponse) {
|
||||
return res
|
||||
}
|
||||
// 不进行任何处理，直接返回
|
||||
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
|
||||
if (!isTransformResponse) {
|
||||
return res.data
|
||||
}
|
||||
// 错误的时候返回
|
||||
export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
|
||||
|
||||
const { data } = res
|
||||
if (!data) {
|
||||
// 返回“[HTTP]请求没有返回值”;
|
||||
throw new Error(t('sys.api.apiRequestFailed'))
|
||||
}
|
||||
// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
|
||||
const { code, msg } = data
|
||||
const result = data.data
|
||||
// TODO 芋艿：文件下载，需要特殊处理
|
||||
if (code === undefined) {
|
||||
console.log(res)
|
||||
return res.data
|
||||
}
|
||||
// 创建axios实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: BASE_URL + BASE_API, // api 的 base_url
|
||||
timeout: config.request_timeout // 请求超时时间
|
||||
})
|
||||
|
||||
// 这里逻辑可以根据项目进行修改
|
||||
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
|
||||
if (hasSuccess) {
|
||||
return result
|
||||
}
|
||||
|
||||
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
|
||||
// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
|
||||
let timeoutMsg = ''
|
||||
switch (code) {
|
||||
case ResultEnum.TIMEOUT:
|
||||
// TODO 未完成
|
||||
// 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
|
||||
if (!isRefreshToken) {
|
||||
isRefreshToken = true
|
||||
const refreshTokenRes = await refreshToken()
|
||||
// 1. 如果获取不到刷新令牌，则只能执行登出操作
|
||||
if (!refreshTokenRes) {
|
||||
timeoutMsg = t('sys.api.timeoutMessage')
|
||||
wsCache.clear() // 清除浏览器全部临时缓存
|
||||
ElMessageBox.confirm(timeoutMsg, {
|
||||
confirmButtonText: t('login.relogin'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {})
|
||||
break
|
||||
} else {
|
||||
// 2. 进行刷新访问令牌
|
||||
// 2.1 刷新成功，则回放队列的请求 + 当前请求
|
||||
setToken(refreshTokenRes.data)
|
||||
}
|
||||
}
|
||||
default:
|
||||
if (msg) {
|
||||
timeoutMsg = msg
|
||||
}
|
||||
}
|
||||
|
||||
// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
|
||||
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
|
||||
if (options.errorMessageMode === 'modal') {
|
||||
await ElMessageBox.confirm(timeoutMsg, {
|
||||
type: 'error'
|
||||
})
|
||||
} else if (options.errorMessageMode === 'message') {
|
||||
ElMessage.error(timeoutMsg)
|
||||
}
|
||||
|
||||
throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))
|
||||
},
|
||||
|
||||
// 请求之前处理config
|
||||
beforeRequestHook: (config, options) => {
|
||||
const { apiUrl, joinParamsToUrl, formatDate, joinTime = true } = options
|
||||
|
||||
if (apiUrl && isString(apiUrl)) {
|
||||
config.url = `${apiUrl}${config.url}`
|
||||
}
|
||||
const params = config.params || {}
|
||||
const data = config.data || false
|
||||
formatDate && data && !isString(data) && formatRequestDate(data)
|
||||
if (config.method?.toUpperCase() === RequestEnum.GET) {
|
||||
if (!isString(params)) {
|
||||
// 给 get 请求加上时间戳参数，避免从缓存中拿数据。
|
||||
config.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
|
||||
} else {
|
||||
// 兼容restful风格
|
||||
config.url = config.url + params + `${joinTimestamp(joinTime, true)}`
|
||||
config.params = undefined
|
||||
}
|
||||
} else {
|
||||
if (!isString(params)) {
|
||||
formatDate && formatRequestDate(params)
|
||||
if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
|
||||
config.data = data
|
||||
config.params = params
|
||||
} else {
|
||||
// 非GET请求如果没有提供data，则将params视为data
|
||||
config.data = params
|
||||
config.params = undefined
|
||||
}
|
||||
if (joinParamsToUrl) {
|
||||
config.url = setObjToUrlParams(
|
||||
config.url as string,
|
||||
Object.assign({}, config.params, config.data)
|
||||
)
|
||||
}
|
||||
} else {
|
||||
// 兼容restful风格
|
||||
config.url = config.url + params
|
||||
config.params = undefined
|
||||
}
|
||||
}
|
||||
return config
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 请求拦截器处理
|
||||
*/
|
||||
requestInterceptors: (config, options) => {
|
||||
// 请求之前处理config
|
||||
const token = getAccessToken()
|
||||
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
|
||||
// jwt token
|
||||
;(config as Recordable).headers.Authorization = options.authenticationScheme
|
||||
? `${options.authenticationScheme} ${token}`
|
||||
: token
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config!.headers || {}).isToken === false
|
||||
if (getAccessToken() && !isToken) {
|
||||
;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
|
||||
}
|
||||
// 设置租户
|
||||
if (tenantEnable) {
|
||||
const tenantId = wsCache.get('tenantId')
|
||||
const tenantId = getTenantId()
|
||||
if (tenantId) (config as Recordable).headers.common['tenant-id'] = tenantId
|
||||
}
|
||||
if (
|
||||
config.method === 'post' &&
|
||||
config!.headers!['Content-Type'] === 'application/x-www-form-urlencoded'
|
||||
) {
|
||||
config.data = qs.stringify(config.data)
|
||||
}
|
||||
// get参数编码
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url as string
|
||||
url += '?'
|
||||
const keys = Object.keys(config.params)
|
||||
for (const key of keys) {
|
||||
if (config.params[key] !== void 0 && config.params[key] !== null) {
|
||||
url += `${key}=${encodeURIComponent(config.params[key])}&`
|
||||
}
|
||||
}
|
||||
// 给 get 请求加上时间戳参数，避免从缓存中拿数据
|
||||
// const now = new Date().getTime()
|
||||
// url = url.substring(0, url.length - 1) + `?_t=${now}`
|
||||
config.params = {}
|
||||
config.url = url
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* @description: 响应拦截器处理
|
||||
*/
|
||||
responseInterceptors: (res: AxiosResponse<any>) => {
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 响应错误处理
|
||||
*/
|
||||
responseInterceptorsCatch: (error: any) => {
|
||||
const { response, code, message, config } = error || {}
|
||||
const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
|
||||
const msg: string = response?.data?.msg ?? ''
|
||||
const err: string = error?.toString?.() ?? ''
|
||||
let errMessage = ''
|
||||
|
||||
try {
|
||||
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
|
||||
errMessage = t('sys.api.apiTimeoutMessage')
|
||||
}
|
||||
if (err?.includes('Network Error')) {
|
||||
errMessage = t('sys.api.networkExceptionMsg')
|
||||
}
|
||||
|
||||
if (errMessage) {
|
||||
if (errorMessageMode === 'modal') {
|
||||
ElMessageBox.confirm(errMessage, {
|
||||
type: 'error'
|
||||
})
|
||||
} else if (errorMessageMode === 'message') {
|
||||
ElMessage.error(errMessage)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error as unknown as string)
|
||||
// response 拦截器
|
||||
service.interceptors.response.use(
|
||||
async (response: AxiosResponse<Recordable>) => {
|
||||
const { data } = response
|
||||
if (!data) {
|
||||
// 返回“[HTTP]请求没有返回值”;
|
||||
throw new Error()
|
||||
}
|
||||
|
||||
checkStatus(error?.response?.status, msg, errorMessageMode)
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = data.code || result_code
|
||||
// 获取错误信息
|
||||
const msg = data.msg || errorCode[code] || errorCode['default']
|
||||
if (ignoreMsgs.indexOf(msg) !== -1) {
|
||||
// 如果是忽略的错误码，直接返回 msg 异常
|
||||
return Promise.reject(msg)
|
||||
} else if (code === 401) {
|
||||
// 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
|
||||
if (!isRefreshToken) {
|
||||
isRefreshToken = true
|
||||
// 1. 如果获取不到刷新令牌，则只能执行登出操作
|
||||
if (!getRefreshToken()) {
|
||||
return handleAuthorized()
|
||||
}
|
||||
}
|
||||
} else if (code === 500) {
|
||||
ElMessage.error(msg)
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code === 901) {
|
||||
ElMessage.error(
|
||||
'<div>演示模式，无法进行写操作</div>' +
|
||||
'<div> </div>' +
|
||||
'<div>参考 https://doc.iocoder.cn/ 教程</div>' +
|
||||
'<div> </div>' +
|
||||
'<div>5 分钟搭建本地环境</div>'
|
||||
)
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code !== 200) {
|
||||
if (msg === '无效的刷新令牌') {
|
||||
// hard coding：忽略这个提示，直接登出
|
||||
console.log(msg)
|
||||
} else {
|
||||
ElNotification.error({
|
||||
title: msg
|
||||
})
|
||||
}
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return data
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
ElMessage.error(error.message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
function handleAuthorized() {
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true
|
||||
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
|
||||
confirmButtonText: '重新登录',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
isRelogin.show = false
|
||||
})
|
||||
.catch(() => {
|
||||
isRelogin.show = false
|
||||
})
|
||||
}
|
||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
||||
}
|
||||
|
||||
function createAxios(opt?: Partial<CreateAxiosOptions>) {
|
||||
return new VAxios(
|
||||
deepMerge(
|
||||
{
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
||||
// authentication schemes，e.g: Bearer
|
||||
// authenticationScheme: 'Bearer',
|
||||
authenticationScheme: 'Bearer',
|
||||
timeout: 10 * 1000,
|
||||
// 基础接口地址
|
||||
// baseURL: globSetting.apiUrl,
|
||||
|
||||
headers: { 'Content-Type': ContentTypeEnum.JSON },
|
||||
// 如果是form-data格式
|
||||
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
|
||||
// 数据处理方式
|
||||
transform,
|
||||
// 配置项，下面的选项都可以在独立的接口请求中覆盖
|
||||
requestOptions: {
|
||||
// 默认将prefix 添加到url
|
||||
joinPrefix: true,
|
||||
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||
isReturnNativeResponse: false,
|
||||
// 需要对返回数据进行处理
|
||||
isTransformResponse: true,
|
||||
// post请求的时候添加参数到url
|
||||
joinParamsToUrl: false,
|
||||
// 格式化提交参数时间
|
||||
formatDate: true,
|
||||
// 消息提示类型
|
||||
errorMessageMode: 'message',
|
||||
// 接口地址
|
||||
apiUrl: apiUrl,
|
||||
// 是否加入时间戳
|
||||
joinTime: true,
|
||||
// 忽略重复请求
|
||||
ignoreCancelToken: true,
|
||||
// 是否携带token
|
||||
withToken: true
|
||||
}
|
||||
},
|
||||
opt || {}
|
||||
)
|
||||
)
|
||||
}
|
||||
export const defHttp = createAxios()
|
||||
|
||||
// other api url
|
||||
// export const otherHttp = createAxios({
|
||||
// requestOptions: {
|
||||
// apiUrl: 'xxx',
|
||||
// urlPrefix: 'xxx',
|
||||
// },
|
||||
// });
|
||||
export { service }
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
import { unref } from 'vue'
|
||||
import { isObject } from '@/utils/is'
|
||||
// dynamic use hook props
|
||||
export const getDynamicProps = <T, U>(props: T): Partial<U> => {
|
||||
const ret: Recordable = {}
|
||||
|
||||
Object.keys(props).map((key) => {
|
||||
ret[key] = unref((props as Recordable)[key])
|
||||
})
|
||||
|
||||
return ret as Partial<U>
|
||||
}
|
||||
|
||||
export const openWindow = (
|
||||
url: string,
|
||||
opt?: {
|
||||
target?: '_self' | '_blank' | string
|
||||
noopener?: boolean
|
||||
noreferrer?: boolean
|
||||
}
|
||||
) => {
|
||||
const { target = '__blank', noopener = true, noreferrer = true } = opt || {}
|
||||
const feature: string[] = []
|
||||
|
||||
noopener && feature.push('noopener=yes')
|
||||
noreferrer && feature.push('noreferrer=yes')
|
||||
|
||||
window.open(url, target, feature.join(','))
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the object as a parameter to the URL
|
||||
* @param baseUrl url
|
||||
* @param obj
|
||||
* @returns {string}
|
||||
* eg:
|
||||
* let obj = {a: '3', b: '4'}
|
||||
* setObjToUrlParams('www.baidu.com', obj)
|
||||
* ==>www.baidu.com?a=3&b=4
|
||||
*/
|
||||
export const setObjToUrlParams = (baseUrl: string, obj: any): string => {
|
||||
let parameters = ''
|
||||
for (const key in obj) {
|
||||
parameters += key + '=' + encodeURIComponent(obj[key]) + '&'
|
||||
}
|
||||
parameters = parameters.replace(/&$/, '')
|
||||
return /\?$/.test(baseUrl) ? baseUrl + parameters : baseUrl.replace(/\/?$/, '?') + parameters
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: Set ui mount node
|
||||
*/
|
||||
export const getPopupContainer = (node?: HTMLElement): HTMLElement => {
|
||||
return (node?.parentNode as HTMLElement) ?? document.body
|
||||
}
|
||||
|
||||
export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
|
||||
let key: string
|
||||
for (key in target) {
|
||||
src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key])
|
||||
}
|
||||
return src
|
||||
}
|
||||
Reference in New Issue
Block a user