| | |
| | | // The axios configuration can be changed according to the project, just change the file, other files can be left unchanged |
| | | |
| | | import type { AxiosResponse } from 'axios'; |
| | | import type { CreateAxiosOptions, RequestOptions, Result } from './types'; |
| | | |
| | | import type { RequestOptions, Result } from '/#/axios'; |
| | | import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'; |
| | | import { VAxios } from './Axios'; |
| | | import { getToken } from '/@/utils/auth'; |
| | | import { AxiosTransform } from './axiosTransform'; |
| | | |
| | | import { checkStatus } from './checkStatus'; |
| | | |
| | | import { useGlobSetting } from '/@/settings/use'; |
| | | import { useGlobSetting } from '/@/hooks/setting'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | |
| | | import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum'; |
| | | |
| | | import { isString } from '/@/utils/is'; |
| | | import { formatRequestDate } from '/@/utils/dateUtil'; |
| | | import { getToken } from '/@/utils/auth'; |
| | | import { setObjToUrlParams, deepMerge } from '/@/utils'; |
| | | import { errorStore } from '/@/store/modules/error'; |
| | | import { errorResult } from './const'; |
| | | import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { joinTimestamp, formatRequestDate } from './helper'; |
| | | |
| | | const globSetting = useGlobSetting(); |
| | | const prefix = globSetting.urlPrefix; |
| | | const urlPrefix = globSetting.urlPrefix; |
| | | const { createMessage, createErrorModal } = useMessage(); |
| | | |
| | | /** |
| | |
| | | */ |
| | | const transform: AxiosTransform = { |
| | | /** |
| | | * @description: 处理请求数据 |
| | | * @description: 处理请求数据。如果数据不是预期格式,可直接抛出错误 |
| | | */ |
| | | transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => { |
| | | const { isTransformRequestResult } = options; |
| | | transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => { |
| | | const { t } = useI18n(); |
| | | const { isTransformResponse, isReturnNativeResponse } = options; |
| | | // 是否返回原生响应头 比如:需要获取响应头时使用该属性 |
| | | if (isReturnNativeResponse) { |
| | | return res; |
| | | } |
| | | // 不进行任何处理,直接返回 |
| | | // 用于页面代码可能需要直接获取code,data,message这些信息时开启 |
| | | if (!isTransformRequestResult) { |
| | | if (!isTransformResponse) { |
| | | return res.data; |
| | | } |
| | | // 错误的时候返回 |
| | |
| | | const { data } = res; |
| | | if (!data) { |
| | | // return '[HTTP] Request has no return value'; |
| | | return errorResult; |
| | | throw new Error(t('sys.api.apiRequestFailed')); |
| | | } |
| | | // 这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式 |
| | | const { code, result, message } = data; |
| | | |
| | | // 这里逻辑可以根据项目进行修改 |
| | | const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS; |
| | | if (!hasSuccess) { |
| | | if (message) { |
| | | // errorMessageMode=‘modal’的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误 |
| | | if (options.errorMessageMode === 'modal') { |
| | | createErrorModal({ title: '错误提示', content: message }); |
| | | } else { |
| | | createMessage.error(message); |
| | | } |
| | | } |
| | | Promise.reject(new Error(message)); |
| | | return errorResult; |
| | | } |
| | | |
| | | // 接口请求成功,直接返回结果 |
| | | if (code === ResultEnum.SUCCESS) { |
| | | if (hasSuccess) { |
| | | return result; |
| | | } |
| | | // 接口请求错误,统一提示错误信息 |
| | | if (code === ResultEnum.ERROR) { |
| | | if (message) { |
| | | createMessage.error(data.message); |
| | | Promise.reject(new Error(message)); |
| | | } else { |
| | | const msg = '操作失败,系统异常!'; |
| | | createMessage.error(msg); |
| | | Promise.reject(new Error(msg)); |
| | | } |
| | | return errorResult; |
| | | |
| | | // 在此处根据自己项目的实际情况对不同的code执行不同的操作 |
| | | // 如果不希望中断当前请求,请return数据,否则直接抛出异常即可 |
| | | let timeoutMsg = ''; |
| | | switch (code) { |
| | | case ResultEnum.TIMEOUT: |
| | | timeoutMsg = t('sys.api.timeoutMessage'); |
| | | break; |
| | | default: |
| | | if (message) { |
| | | timeoutMsg = message; |
| | | } |
| | | } |
| | | // 登录超时 |
| | | if (code === ResultEnum.TIMEOUT) { |
| | | const timeoutMsg = '登录超时,请重新登录!'; |
| | | createErrorModal({ |
| | | title: '操作失败', |
| | | content: timeoutMsg, |
| | | }); |
| | | Promise.reject(new Error(timeoutMsg)); |
| | | return errorResult; |
| | | |
| | | // errorMessageMode=‘modal’的时候会显示modal错误弹窗,而不是消息提示,用于一些比较重要的错误 |
| | | // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示 |
| | | if (options.errorMessageMode === 'modal') { |
| | | createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg }); |
| | | } else if (options.errorMessageMode === 'message') { |
| | | createMessage.error(timeoutMsg); |
| | | } |
| | | return errorResult; |
| | | |
| | | throw new Error(timeoutMsg || t('sys.api.apiRequestFailed')); |
| | | }, |
| | | |
| | | // 请求之前处理config |
| | | beforeRequestHook: (config, options) => { |
| | | const { apiUrl, joinPrefix, joinParamsToUrl, formatDate } = options; |
| | | const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options; |
| | | |
| | | if (joinPrefix) { |
| | | config.url = `${prefix}${config.url}`; |
| | | config.url = `${urlPrefix}${config.url}`; |
| | | } |
| | | |
| | | if (apiUrl && isString(apiUrl)) { |
| | | config.url = `${apiUrl}${config.url}`; |
| | | } |
| | | if (config.method === RequestEnum.GET) { |
| | | const now = new Date().getTime(); |
| | | if (!isString(config.params)) { |
| | | config.data = { |
| | | // 给 get 请求加上时间戳参数,避免从缓存中拿数据。 |
| | | params: Object.assign(config.params || {}, { |
| | | _t: now, |
| | | }), |
| | | }; |
| | | 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 + config.params + `?_t=${now}`; |
| | | config.url = config.url + params + `${joinTimestamp(joinTime, true)}`; |
| | | config.params = undefined; |
| | | } |
| | | } else { |
| | | if (!isString(config.params)) { |
| | | formatDate && formatRequestDate(config.params); |
| | | config.data = config.params; |
| | | config.params = undefined; |
| | | 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, config.data); |
| | | config.url = setObjToUrlParams( |
| | | config.url as string, |
| | | Object.assign({}, config.params, config.data), |
| | | ); |
| | | } |
| | | } else { |
| | | // 兼容restful风格 |
| | | config.url = config.url + config.params; |
| | | config.url = config.url + params; |
| | | config.params = undefined; |
| | | } |
| | | } |
| | |
| | | /** |
| | | * @description: 请求拦截器处理 |
| | | */ |
| | | requestInterceptors: (config) => { |
| | | requestInterceptors: (config, options) => { |
| | | // 请求之前处理config |
| | | const token = getToken(); |
| | | if (token) { |
| | | if (token && (config as Recordable)?.requestOptions?.withToken !== false) { |
| | | // jwt token |
| | | config.headers.Authorization = token; |
| | | config.headers.Authorization = options.authenticationScheme |
| | | ? `${options.authenticationScheme} ${token}` |
| | | : token; |
| | | } |
| | | return config; |
| | | }, |
| | | |
| | | /** |
| | | * @description: 响应拦截器处理 |
| | | */ |
| | | responseInterceptors: (res: AxiosResponse<any>) => { |
| | | return res; |
| | | }, |
| | | |
| | | /** |
| | | * @description: 响应错误处理 |
| | | */ |
| | | responseInterceptorsCatch: (error: any) => { |
| | | errorStore.setupErrorHandle(error); |
| | | const { response, code, message } = error || {}; |
| | | const msg: string = |
| | | response && response.data && response.data.error ? response.data.error.message : ''; |
| | | const err: string = error.toString(); |
| | | 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 = ''; |
| | | |
| | | try { |
| | | if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) { |
| | | createMessage.error('接口请求超时,请刷新页面重试!'); |
| | | errMessage = t('sys.api.apiTimeoutMessage'); |
| | | } |
| | | if (err && err.includes('Network Error')) { |
| | | createErrorModal({ |
| | | title: '网络异常', |
| | | content: '请检查您的网络连接是否正常!', |
| | | }); |
| | | if (err?.includes('Network Error')) { |
| | | errMessage = t('sys.api.networkExceptionMsg'); |
| | | } |
| | | |
| | | if (errMessage) { |
| | | if (errorMessageMode === 'modal') { |
| | | createErrorModal({ title: t('sys.api.errorTip'), content: errMessage }); |
| | | } else if (errorMessageMode === 'message') { |
| | | createMessage.error(errMessage); |
| | | } |
| | | return Promise.reject(error); |
| | | } |
| | | } catch (error) { |
| | | throw new Error(error); |
| | | } |
| | | checkStatus(error.response && error.response.status, msg); |
| | | |
| | | checkStatus(error?.response?.status, msg, errorMessageMode); |
| | | return Promise.reject(error); |
| | | }, |
| | | }; |
| | |
| | | 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: '', |
| | | timeout: 10 * 1000, |
| | | // 基础接口地址 |
| | | // baseURL: globSetting.apiUrl, |
| | | // 接口可能会有通用的地址部分,可以统一抽取出来 |
| | | prefixUrl: prefix, |
| | | |
| | | headers: { 'Content-Type': ContentTypeEnum.JSON }, |
| | | // 如果是form-data格式 |
| | | // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED }, |
| | | // 数据处理方式 |
| | | transform, |
| | | // 配置项,下面的选项都可以在独立的接口请求中覆盖 |
| | | requestOptions: { |
| | | // 默认将prefix 添加到url |
| | | joinPrefix: true, |
| | | // 是否返回原生响应头 比如:需要获取响应头时使用该属性 |
| | | isReturnNativeResponse: false, |
| | | // 需要对返回数据进行处理 |
| | | isTransformRequestResult: true, |
| | | isTransformResponse: true, |
| | | // post请求的时候添加参数到url |
| | | joinParamsToUrl: false, |
| | | // 格式化提交参数时间 |
| | | formatDate: true, |
| | | // 消息提示类型 |
| | | errorMessageMode: 'none', |
| | | errorMessageMode: 'message', |
| | | // 接口地址 |
| | | apiUrl: globSetting.apiUrl, |
| | | // 接口拼接地址 |
| | | urlPrefix: urlPrefix, |
| | | // 是否加入时间戳 |
| | | joinTime: true, |
| | | // 忽略重复请求 |
| | | ignoreCancelToken: true, |
| | | // 是否携带token |
| | | withToken: true, |
| | | }, |
| | | }, |
| | | opt || {} |
| | | ) |
| | | opt || {}, |
| | | ), |
| | | ); |
| | | } |
| | | export const defHttp = createAxios(); |
| | |
| | | // export const otherHttp = createAxios({ |
| | | // requestOptions: { |
| | | // apiUrl: 'xxx', |
| | | // urlPrefix: 'xxx', |
| | | // }, |
| | | // }); |