Vue3+vben admin后台管理系统接口封装
直接上代码
这个做axios的配置
// axios配置 可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
import type { AxiosResponse } from 'axios';
import type { RequestOptions, Result } from '/#/axios';
import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
import { VAxios } from './Axios';
import { checkStatus } from './checkStatus';
import { useGlobSetting } from '/@/hooks/setting';
import { useMessage } from '/@/hooks/web/useMessage';
import { RequestEnum, ContentTypeEnum } from '/@/enums/httpEnum';
import { isString } from '/@/utils/is';
import { getToken, getRootScope } from '/@/utils/auth';
import { setObjToUrlParams, deepMerge } from '/@/utils';
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
import { useUserStoreWithOut } from '/@/store/modules/user';
import { useI18n } from '/@/hooks/web/useI18n';
import { joinTimestamp, formatRequestDate } from './helper';
const globSetting = useGlobSetting();
const { scmApiUrl, urlPrefix, scmUrlPrefix } = globSetting;
const { createMessage, createErrorModal } = useMessage();
/**
* @description: 数据处理，方便区分多种处理方式
*/
const transform: AxiosTransform = {
/**
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
*/
transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
const { t } = useI18n();
const { isTransformResponse, isReturnNativeResponse } = options;
if (res['headers']['content-type'] == 'application/pdf;charset=UTF-8') {
return res.data;
}
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
if (isReturnNativeResponse) {
return res;
}
// 不进行任何处理，直接返回
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
if (!isTransformResponse) {
return res.data;
}
// 错误的时候返回
const result = res.data;
if (!result) {
// return '[HTTP] 请求没有返回值';
throw new Error(t('sys.api.apiRequestFailed'));
}
// 这里 success,error,data为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
const { success, error, data } = result;
if (success === true) {
return data;
}
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
let timeoutMsg = '';
if (error) {
timeoutMsg =
error.view || error.message || `服务器开小差了${error.code ? ',code:' + error.code : ''}`;
// checkStatus(error?.code, timeoutMsg, options.errorMessageMode);
// throw new Error(t('sys.api.apiRequestFailed'));
}
// 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);
}
throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'));
},
// 请求之前处理config
beforeRequestHook: (config, options) => {
const {
joinPrefix,
prefixType = 'inc',
joinParamsToUrl,
formatDate,
joinTime = true,
} = options;
let { apiUrl } = options;
if (joinPrefix) {
apiUrl = prefixType === 'inc' ? globSetting.apiUrl : scmApiUrl;
config.url = `${prefixType === 'inc' ? urlPrefix : scmUrlPrefix}${config.url}`;
}
if (apiUrl && isString(apiUrl)) {
config.url = `${apiUrl}${config.url}`;
}
const params = config.params || {};
const data = config.data || false;
const userStore = useUserStoreWithOut();
if (userStore.getUserInfo.uid) {
params['operatorUserId'] = params['operatorUserId']
? params['operatorUserId']
: userStore.getUserInfo.uid;
if (data) {
data['operatorUserId'] = data['operatorUserId']
? data['operatorUserId']
: userStore.getUserInfo.uid;
}
}
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;
}
}
config.data['channelType'] = 'as';
for (const key in config.data) {
if (typeof config.data[key] !== 'string') {
// config.data[key] = JSON.stringify(config.data[key]);
}
}
return config;
},
/**
* @description: 请求拦截器处理
*/
requestInterceptors: (config, options) => {
// 请求之前处理config
const token = getToken();
const rootScope = getRootScope();
if ((config as Recordable)?.requestOptions?.withToken !== false) {
config.headers['Auth-Token'] = token || '';
config.headers['Root-Scope'] = '2021012815520607088' || rootScope || '';
}
if (false) {
console.log(config, options);
}
return config;
},
/**
* @description: 响应拦截器处理
*/
responseInterceptors: (res: AxiosResponse<any>) => {
return res;
},
/**
* @description: 响应错误处理
*/
responseInterceptorsCatch: (error: any) => {
console.log(error);
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) {
errMessage = t('sys.api.apiTimeoutMessage');
}
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: any) {
throw new Error(error);
}
checkStatus(error?.response?.status, msg, errorMessageMode);
return Promise.reject(error);
},
};
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: '',
timeout: 60 * 1000,
// 基础接口地址
// baseURL: globSetting.apiUrl,
// 接口可能会有通用的地址部分，可以统一抽取出来
urlPrefix: urlPrefix,
headers: { 'Content-Type': ContentTypeEnum.JSON },
// 如果是form-data格式
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
// 数据处理方式
transform,
// 配置项，下面的选项都可以在独立的接口请求中覆盖
requestOptions: {
// 默认将prefix 添加到url
joinPrefix: true,
// 需要加入的prefix类型，默认添加inc系统前缀
prefixType: 'inc',
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
isReturnNativeResponse: false,
// 需要对返回数据进行处理
isTransformResponse: true,
// post请求的时候添加参数到url
joinParamsToUrl: false,
// 格式化提交参数时间
formatDate: true,
// 消息提示类型
errorMessageMode: 'message',
// 接口地址
apiUrl: globSetting.apiUrl,
// 是否加入时间戳
joinTime: true,
// 忽略重复请求
ignoreCancelToken: true,
// 是否携带token
withToken: true,
},
},
opt || {}
)
);
}
export const defHttp = createAxios();
// other api url
// export const otherHttp = createAxios({
// requestOptions: {
// apiUrl: 'xxx',
// },
// });
先在自己的API文件夹建立API.ts
引入相关连的axios方法
import { defHttp } from '/@/utils/http/axios';
import { ErrorMessageMode } from '/#/axios';
import {
GoOnlineOrOffline,
} from '/@/api/components/model/commissionRules';
enum Api {
goOnlineOrOffline = '/cds-rule/goOnlineOrOffline',
}
/**
* @description 暂停启用接口
*/
export function goOnlineOrOfflineApi(params: GoOnlineOrOffline, mode: ErrorMessageMode = 'modal') {
return defHttp.post<boolean>(
{
url: Api.goOnlineOrOffline,
params,
},
{
errorMessageMode: mode,
}
);
}
然后再在 commissionRules.ts 文件下面定义params
export interface GoOnlineOrOffline {
//管家佣金规则详情
status: string;
summaryId: string;
}