123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- // axios配置 可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动
- // 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 { RequestOptions, Result } from './types';
- 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, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum';
- import { isString } from '/@/utils/is';
- import { getToken } from '/@/utils/auth';
- import { setObjToUrlParams, deepMerge } from '/@/utils';
- import { errorStore } from '/@/store/modules/error';
- import { errorResult } from './const';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { createNow, formatRequestDate } from './helper';
- const globSetting = useGlobSetting();
- const prefix = globSetting.urlPrefix;
- const { createMessage, createErrorModal } = useMessage();
- /**
- * @description: 数据处理,方便区分多种处理方式
- */
- const transform: AxiosTransform = {
- /**
- * @description: 处理请求数据
- */
- transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
- const { t } = useI18n();
- const { isTransformRequestResult } = options;
- // 不进行任何处理,直接返回
- // 用于页面代码可能需要直接获取code,data,message这些信息时开启
- if (!isTransformRequestResult) {
- return res.data;
- }
- // 错误的时候返回
- const { data } = res;
- if (!data) {
- // return '[HTTP] Request has no return value';
- return errorResult;
- }
- // 这里 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: t('sys.api.errorTip'), content: message });
- } else if (options.errorMessageMode === 'message') {
- createMessage.error(message);
- }
- }
- Promise.reject(new Error(message));
- return errorResult;
- }
- // 接口请求成功,直接返回结果
- if (code === ResultEnum.SUCCESS) {
- return result;
- }
- // 接口请求错误,统一提示错误信息
- if (code === ResultEnum.ERROR) {
- if (message) {
- createMessage.error(data.message);
- Promise.reject(new Error(message));
- } else {
- const msg = t('sys.api.errorMessage');
- createMessage.error(msg);
- Promise.reject(new Error(msg));
- }
- return errorResult;
- }
- // 登录超时
- if (code === ResultEnum.TIMEOUT) {
- const timeoutMsg = t('sys.api.timeoutMessage');
- createErrorModal({
- title: t('sys.api.operationFailed'),
- content: timeoutMsg,
- });
- Promise.reject(new Error(timeoutMsg));
- return errorResult;
- }
- return errorResult;
- },
- // 请求之前处理config
- beforeRequestHook: (config, options) => {
- const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
- if (joinPrefix) {
- config.url = `${prefix}${config.url}`;
- }
- if (apiUrl && isString(apiUrl)) {
- config.url = `${apiUrl}${config.url}`;
- }
- const params = config.params || {};
- if (config.method?.toUpperCase() === RequestEnum.GET) {
- if (!isString(params)) {
- // 给 get 请求加上时间戳参数,避免从缓存中拿数据。
- config.params = Object.assign(params || {}, createNow(joinTime, false));
- } else {
- // 兼容restful风格
- config.url = config.url + params + `${createNow(joinTime, true)}`;
- config.params = undefined;
- }
- } else {
- if (!isString(params)) {
- formatDate && formatRequestDate(params);
- config.data = params;
- config.params = undefined;
- if (joinParamsToUrl) {
- config.url = setObjToUrlParams(config.url as string, config.data);
- }
- } else {
- // 兼容restful风格
- config.url = config.url + params;
- config.params = undefined;
- }
- }
- return config;
- },
- /**
- * @description: 请求拦截器处理
- */
- requestInterceptors: (config) => {
- // 请求之前处理config
- const token = getToken();
- if (token) {
- // jwt token
- config.headers.Authorization = token;
- }
- return config;
- },
- /**
- * @description: 响应错误处理
- */
- responseInterceptorsCatch: (error: any) => {
- const { t } = useI18n();
- errorStore.setupErrorHandle(error);
- const { response, code, message } = error || {};
- const msg: string = response?.data?.error?.message ?? '';
- const err: string = error?.toString?.() ?? '';
- try {
- if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
- createMessage.error(t('sys.api.apiTimeoutMessage'));
- }
- if (err?.includes('Network Error')) {
- createErrorModal({
- title: t('sys.api.networkException'),
- content: t('sys.api.networkExceptionMsg'),
- });
- }
- } catch (error) {
- throw new Error(error);
- }
- checkStatus(error?.response?.status, msg);
- return Promise.reject(error);
- },
- };
- function createAxios(opt?: Partial<CreateAxiosOptions>) {
- return new VAxios(
- deepMerge(
- {
- 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,
- // 需要对返回数据进行处理
- isTransformRequestResult: true,
- // post请求的时候添加参数到url
- joinParamsToUrl: false,
- // 格式化提交参数时间
- formatDate: true,
- // 消息提示类型
- errorMessageMode: 'message',
- // 接口地址
- apiUrl: globSetting.apiUrl,
- // 是否加入时间戳
- joinTime: true,
- // 忽略重复请求
- ignoreCancelToken: true,
- },
- },
- opt || {}
- )
- );
- }
- export const defHttp = createAxios();
- // other api url
- // export const otherHttp = createAxios({
- // requestOptions: {
- // apiUrl: 'xxx',
- // },
- // });
|