requestMessage.js
/** * @Descripttion: axios和操作提示的二次封装 * @Author: lgen */ import Vue from 'vue' import axios from 'axios' /* 页面顶部弹出提示 * @method showMsg * @param {String} text 提示的文字 * @param {Number} icon 状态图标，1成功，2警告，3消息，4错误 * @param {Number} duration 显示时间，毫秒，设为 0 则不会自动关闭 */ const showMsg=(text,icon,duration)=>{ let typeText='' switch(icon){ case 1: typeText='success'; break; case 2: typeText='warning'; break; case 3: typeText=''; break; default: typeText='error'; } Vue.prototype.$message({ message:text, type:typeText, duration:duration?duration:1000 }); } /* 删除对象中的空值 * @method deleteObjNull * @param {Object} obj 需要处理的对象 */ const deleteObjNull=(obj)=>{ for(let key in obj){ if(obj[key]==='' || obj[key]===undefined || obj[key]===null){ delete obj[key]; } } } // 加载动画 let loading; const openFullScreen=()=>{ loading = Vue.prototype.$loading({ lock: true, text: '加载中...', target:'.loadingBox', //Loading 需要覆盖的 DOM 节点 spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.5)' }); } //清除动画 const endLoading=()=>{ loading.close(); } // 请求配置 const instance=axios.create({ timeout: 60000, //指定请求超时的毫秒数(0 表示无超时时间) }) // 添加请求拦截器 instance.interceptors.request.use(config=>{ // 在发送请求之前 if(loading){ // 如果存在动画，则先清除再执行新的动画 endLoading(); //动画结束 } openFullScreen(); //加载动画 // 处理打包之后请求代理404错误 if(config.url.includes('/other')){ //接口1 config.url=process.env.VUE_APP_OTHER+config.url.replace('/aa',''); }else if(config.url.includes('/mall')){ //接口2 config.url=process.env.VUE_APP_MALL+config.url.replace('/bb',''); }else if(config.url.includes('/design')){ //接口3 config.url=process.env.VUE_APP_DESIGN+config.url.replace('/cc',''); } return config; },error=>{ // 请求出错 setTimeout(() => { endLoading(); //动画结束 showMsg('加载超时'); },3000) return Promise.reject(error); }) // 添加响应拦截器 instance.interceptors.response.use(response=>{ endLoading(); //动画结束 return response; },error=>{ // 响应出错 setTimeout(() => { endLoading(); //动画结束 showMsg('请求失败'); },1000) return Promise.reject(error); }) /* 统一axios请求方法的格式 * @method axiosRequest * @param {String} url 请求的地址 * @param {Object} data 请求参数 * @param {Boolean} isForm 是否表单数据，含有文件上传 * @param {String} type 请求类型 * @return {Object} promise对象 */ const axiosRequest=async (url='',data={},isForm=false,type='POST')=>{ let result; //请求的返回值 type = type.toUpperCase(); deleteObjNull(data); // 删除请求参数中的空值 // 如果是表单数据，进行处理 if(isForm){ let form=new FormData() Object.keys(data).forEach(key=>{ form.append(key,data[key]) }) data=form }else{ data=JSON.stringify(data) } // 请求配置 let requestOptions={ method:type, url:url, headers:{ 'Content-type':isForm ? 'multipart/form-data' : 'application/json' }, params:type==='GET'?data:'', data:type!=='GET'?data:'' } // 请求实例 await instance(requestOptions).then(res=>{ result=res; }) return result; } export { showMsg, axiosRequest }