You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

330 lines
11 KiB

2 years ago
// axios配置 可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动
// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
import type { AxiosInstance, AxiosResponse } from 'axios'
2 years ago
import { clone } from 'lodash-es'
import axios from 'axios'
2 years ago
import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'
import { VAxios } from './Axios'
import { checkStatus } from './checkStatus'
import { formatRequestDate, joinTimestamp } from './helper'
import type { RequestOptions, Result } from '@/types/axios'
2 years ago
import { useGlobSetting } from '@/hooks/setting'
import { useMessage } from '@/hooks/web/useMessage'
import { ContentTypeEnum, RequestEnum, ResultEnum } from '@/enums/httpEnum'
import { isEmpty, isNull, isString, isUndefined } from '@/utils/is'
2 years ago
import { getAccessToken, getTenantId } from '@/utils/auth'
import { deepMerge, setObjToUrlParams } from '@/utils'
2 years ago
import { useErrorLogStoreWithOut } from '@/store/modules/errorLog'
import { useI18n } from '@/hooks/web/useI18n'
import { useUserStoreWithOut } from '@/store/modules/user'
import { AxiosRetry } from '@/utils/http/axios/axiosRetry'
const globSetting = useGlobSetting()
const urlPrefix = globSetting.urlPrefix
2 years ago
const tenantEnable = globSetting.tenantEnable
2 years ago
const { createMessage, createErrorModal, createSuccessModal } = useMessage()
2 years ago
// 请求白名单,无须token的接口
const whiteList: string[] = ['/login', '/refresh-token']
2 years ago
/**
* @description: 便
*/
const transform: AxiosTransform = {
/**
* @description:
*/
transformResponseHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
const { t } = useI18n()
const { isTransformResponse, isReturnNativeResponse } = options
2 years ago
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer')
2 years ago
return res.data
2 years ago
// 是否返回原生响应头 比如:需要获取响应头时使用该属性
if (isReturnNativeResponse)
2 years ago
return res
2 years ago
// 不进行任何处理,直接返回
// 用于页面代码可能需要直接获取code,data,message这些信息时开启
if (!isTransformResponse)
2 years ago
return res.data
2 years ago
// 错误的时候返回
const { data } = res
if (!data) {
// return '[HTTP] Request has no return value';
throw new Error(t('sys.api.apiRequestFailed'))
}
// 这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式
2 years ago
const { code, data: result, msg } = data
2 years ago
// 这里逻辑可以根据项目进行修改
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
if (hasSuccess) {
2 years ago
let successMsg = msg
if (isNull(successMsg) || isUndefined(successMsg) || isEmpty(successMsg))
2 years ago
successMsg = t('sys.api.operationSuccess')
if (options.successMessageMode === 'modal')
2 years ago
createSuccessModal({ title: t('sys.api.successTip'), content: successMsg })
2 years ago
else if (options.successMessageMode === 'message')
2 years ago
createMessage.success(successMsg)
2 years ago
return result
}
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
// 如果不希望中断当前请求,请return数据,否则直接抛出异常即可
let timeoutMsg = ''
switch (code) {
2 years ago
case ResultEnum.UNAUTHORIZED:
2 years ago
timeoutMsg = t('sys.api.timeoutMessage')
2 years ago
// eslint-disable-next-line no-case-declarations
2 years ago
const userStore = useUserStoreWithOut()
2 years ago
userStore.setAccessToken(undefined)
2 years ago
userStore.logout(true)
break
default:
if (msg)
2 years ago
timeoutMsg = msg
2 years ago
}
2 years ago
// errorMessageMode='modal' 的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误
2 years ago
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
if (options.errorMessageMode === 'modal')
2 years ago
createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg })
2 years ago
else if (options.errorMessageMode === 'message')
2 years ago
createMessage.error(timeoutMsg)
throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))
},
// 请求之前处理config
beforeRequestHook: (config, options) => {
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options
if (joinPrefix)
2 years ago
config.url = `${urlPrefix}${config.url}`
if (apiUrl && isString(apiUrl))
2 years ago
config.url = `${apiUrl}${config.url}`
2 years ago
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 请求加上时间戳参数,避免从缓存中拿数据。
let url = `${config.url}?`
for (const propName of Object.keys(params)) {
const value = params[propName]
2 years ago
if (value !== void 0 && value !== null && typeof value !== 'undefined') {
if (typeof value === 'object') {
for (const val of Object.keys(value)) {
const paramss = `${propName}[${val}]`
const subPart = `${encodeURIComponent(paramss)}=`
url += `${subPart + encodeURIComponent(value[val])}&`
}
}
else {
url += `${propName}=${encodeURIComponent(value)}&`
}
}
}
url = url.slice(0, -1)
config.params = {}
config.url = url
}
else {
2 years ago
// 兼容restful风格
config.url = `${config.url + params}${joinTimestamp(joinTime, true)}`
2 years ago
config.params = undefined
}
}
else {
2 years ago
if (!isString(params)) {
formatDate && formatRequestDate(params)
2 years ago
if (
Reflect.has(config, 'data')
&& config.data
&& (Object.keys(config.data).length > 0 || config.data instanceof FormData)
) {
2 years ago
config.data = data
config.params = params
}
else {
2 years ago
// 非GET请求如果没有提供data,则将params视为data
config.data = params
config.params = undefined
}
2 years ago
if (joinParamsToUrl) {
config.url = setObjToUrlParams(
config.url as string,
Object.assign({}, config.params, config.data),
)
}
}
else {
2 years ago
// 兼容restful风格
config.url = config.url + params
config.params = undefined
}
}
return config
},
/**
* @description:
*/
requestInterceptors: (config, options) => {
2 years ago
// 是否需要设置 token
2 years ago
let isToken = (config as Recordable)?.requestOptions?.withToken === false
2 years ago
isToken = whiteList.some((v) => {
2 years ago
if (config.url) {
config.url.includes(v)
2 years ago
return false
2 years ago
}
2 years ago
return true
2 years ago
})
2 years ago
// 请求之前处理config
2 years ago
const token = getAccessToken()
if (token && !isToken) {
2 years ago
// jwt token
2 years ago
(config as Recordable).headers.Authorization = options.authenticationScheme
? `${options.authenticationScheme} ${token}`
: token
2 years ago
}
2 years ago
// 设置租户
if (tenantEnable && tenantEnable === 'true') {
const tenantId = getTenantId()
if (tenantId)
(config as Recordable).headers['tenant-id'] = tenantId
2 years ago
}
2 years ago
return config
},
/**
* @description:
*/
responseInterceptors: (res: AxiosResponse<any>) => {
return res
},
/**
* @description:
*/
responseInterceptorsCatch: (axiosInstance: AxiosInstance, error: any) => {
2 years ago
const { t } = useI18n()
const errorLogStore = useErrorLogStoreWithOut()
errorLogStore.addAjaxErrorInfo(error)
const { response, code, message, config } = error || {}
const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
const msg: string = response?.data?.error?.message ?? ''
const err: string = error?.toString?.() ?? ''
let errMessage = ''
if (axios.isCancel(error))
2 years ago
return Promise.reject(error)
try {
if (code === 'ECONNABORTED' && message.includes('timeout'))
2 years ago
errMessage = t('sys.api.apiTimeoutMessage')
if (err?.includes('Network Error'))
2 years ago
errMessage = t('sys.api.networkExceptionMsg')
if (errMessage) {
if (errorMessageMode === 'modal')
2 years ago
createErrorModal({ title: t('sys.api.errorTip'), content: errMessage })
2 years ago
else if (errorMessageMode === 'message')
2 years ago
createMessage.error(errMessage)
2 years ago
return Promise.reject(error)
}
}
catch (error) {
2 years ago
throw new Error(error as unknown as string)
2 years ago
}
checkStatus(error?.response?.status, msg, errorMessageMode)
// 添加自动重试机制 保险起见 只针对GET请求
const retryRequest = new AxiosRetry()
const { isOpenRetry } = config.requestOptions.retryRequest
config.method?.toUpperCase() === RequestEnum.GET
&& isOpenRetry
&& retryRequest.retry(axiosInstance, error)
2 years ago
return Promise.reject(error)
},
2 years ago
}
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',
2 years ago
authenticationScheme: 'Bearer',
2 years ago
timeout: 10 * 1000,
// 基础接口地址
// baseURL: globSetting.apiUrl,
headers: { 'Content-Type': ContentTypeEnum.JSON },
// 如果是form-data格式
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
// 数据处理方式
transform: clone(transform),
// 配置项,下面的选项都可以在独立的接口请求中覆盖
requestOptions: {
// 默认将prefix 添加到url
joinPrefix: true,
// 是否返回原生响应头 比如:需要获取响应头时使用该属性
isReturnNativeResponse: false,
// 需要对返回数据进行处理
isTransformResponse: true,
// post请求的时候添加参数到url
joinParamsToUrl: false,
// 格式化提交参数时间
formatDate: true,
// 消息提示类型
errorMessageMode: 'message',
// 接口地址
apiUrl: globSetting.apiUrl,
// 接口拼接地址
urlPrefix,
2 years ago
// 是否加入时间戳
joinTime: true,
// 忽略重复请求
ignoreCancelToken: true,
// 是否携带token
withToken: true,
retryRequest: {
isOpenRetry: true,
count: 5,
waitTime: 100,
},
},
2 years ago
},
opt || {},
),
2 years ago
)
}
export const defHttp = createAxios()
// other api url
// export const otherHttp = createAxios({
// requestOptions: {
// apiUrl: 'xxx',
// urlPrefix: 'xxx',
// },
// });