// 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' import { clone, cloneDeep } from 'lodash-es' import axios from 'axios' import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform' import { VAxios } from './Axios' import { checkStatus } from './checkStatus' import { formatRequestDate, joinTimestamp } from './helper' import type { RequestOptions, Result } from '/#/axios' import { AxiosRetry } from './axiosRetry' import { useMessage } from '@/hooks/useMessage' import { ContentTypeEnum, HttpErrorMsgEnum, HttpSuccessEnum, RequestEnum, ResultEnum } from '@/enums/httpEnum' import { isEmpty, isNull, isString, isUndefined } from '@/utils/is' import { deepMerge, setObjToUrlParams, strHasArr } from '@/utils' import crypto from '@/utils/crypto' import { useUserStore } from '@/store/moules/userStore/index' const { createMessage, createErrorModal, createSuccessModal } = useMessage() // 请求白名单,无须token的接口 const whiteList: string[] = ['/login', '/refresh-token'] // 不需要解密接口白名单 const notDecryptWhiteList = ['/hulk-auth/oauth/token', '/open-chat/chat/session', '/open-gpts/gpts/getDallEImages'] /** * @description: 数据处理,方便区分多种处理方式 */ const transform: AxiosTransform = { /** * @description: 处理响应数据。如果数据不是预期格式,可直接抛出错误 */ transformResponseHook: (res: AxiosResponse, options: RequestOptions) => { const { isTransformResponse, isReturnNativeResponse } = options const newRes = cloneDeep(res) let newData: Result if (import.meta.env.VITE_GLOB_APP_TOKEN_SCHEME && !strHasArr(res.config.url!, notDecryptWhiteList)) { newData = JSON.parse(crypto.decryptAES(newRes.data as unknown as string, crypto.aesKey)) } else { newData = newRes.data } // 二进制数据则直接返回 if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') return newData // 是否返回原生响应头 比如:需要获取响应头时使用该属性 if (isReturnNativeResponse) return res // 不进行任何处理,直接返回 // 用于页面代码可能需要直接获取code,data,message这些信息时开启 if (!isTransformResponse) { return newData } // 错误的时候返回 const data = newData if (!data) { // return '[HTTP] Request has no return value'; throw new Error(HttpErrorMsgEnum.API_REQUEST_FAILED) } // 这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式 const { code, data: result, msg } = data // 这里逻辑可以根据项目进行修改 const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS if (hasSuccess) { let successMsg = msg if (isNull(successMsg) || isUndefined(successMsg) || isEmpty(successMsg)) successMsg = HttpSuccessEnum.OPERATION_SUCCESS if (options.successMessageMode === 'modal') createSuccessModal({ title: HttpSuccessEnum.SUCCESS_TIP, content: successMsg }) else if (options.successMessageMode === 'message') createMessage.success(successMsg) return result } // 在此处根据自己项目的实际情况对不同的code执行不同的操作 // 如果不希望中断当前请求,请return数据,否则直接抛出异常即可 let timeoutMsg = '' switch (code) { case ResultEnum.UNAUTHORIZED: timeoutMsg = HttpErrorMsgEnum.API_TIMEOUT_MESSAGE break default: if (msg) timeoutMsg = msg } // errorMessageMode='modal' 的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误 // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示 if (options.errorMessageMode === 'modal') createErrorModal({ title: HttpErrorMsgEnum.ERROR_TIP, content: timeoutMsg }) else if (options.errorMessageMode === 'message') createMessage.error(timeoutMsg) throw new Error(timeoutMsg || HttpErrorMsgEnum.API_REQUEST_FAILED) }, // 请求之前处理config beforeRequestHook: (config, options) => { const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options if (joinPrefix) config.url = `${config.url}` 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 请求加上时间戳参数,避免从缓存中拿数据。 let url = `${config.url}?` for (const propName of Object.keys(params)) { const value = params[propName] 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 { // 兼容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 instanceof FormData) ) { 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) => { const userStore = useUserStore() // 是否需要设置 token let isToken = (config as Recordable)?.requestOptions?.withToken === false isToken = whiteList.some((v) => { if (config.url) { config.url.includes(v) return false } return true }) // 请求之前处理config const token = userStore.getToken if (token && !isToken) { // jwt token (config as Recordable).headers[import.meta.env.VITE_GLOB_APP_TOKEN_KEY] = options.tokenScheme ? `${options.tokenScheme} ${crypto.encryptAES(token, crypto.cryptoKey)}` : token } (config as Recordable).headers.Authorization = `${options.authenticationScheme} ${import.meta.env.VITE_GLOB_APP_AUTHORIZATION}` return config }, /** * @description: 响应拦截器处理 */ responseInterceptors: (res: AxiosResponse) => { return res }, /** * @description: 响应错误处理 */ responseInterceptorsCatch: (axiosInstance: AxiosInstance, 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 = '' if (axios.isCancel(error)) return Promise.reject(error) try { if (code === 'ECONNABORTED' && message.includes('timeout')) errMessage = HttpErrorMsgEnum.API_TIMEOUT_MESSAGE if (err?.includes('Network Error')) errMessage = HttpErrorMsgEnum.NETWORK_EXCEPTION if (errMessage) { if (errorMessageMode === 'modal') createErrorModal({ title: HttpErrorMsgEnum.ERROR_TIP, content: errMessage }) else if (errorMessageMode === 'message') createMessage.error(errMessage) return Promise.reject(error) } } catch (error) { throw new Error(error as unknown as string) } 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) return Promise.reject(error) }, } function createAxios(opt?: Partial) { return new VAxios( // 深度合并 deepMerge( { // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes // authentication schemes,e.g: Bearer tokenScheme: import.meta.env.VITE_GLOB_APP_TOKEN_SCHEME, authenticationScheme: import.meta.env.VITE_GLOB_APP_AUTHENTICATION_SCHEME, 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: import.meta.env.VITE_GLOB_BASE_URL, // 是否加入时间戳 joinTime: true, // 忽略重复请求 ignoreCancelToken: true, // 是否携带token withToken: true, retryRequest: { isOpenRetry: true, count: 5, waitTime: 100, }, }, }, opt || {}, ), ) } export const defHttp = createAxios() // other api url // export const otherHttp = createAxios({ // requestOptions: { // apiUrl: 'xxx', // urlPrefix: 'xxx', // }, // });