在上一篇文章中写到axiso拦截器是vue封装的，但其实axios拦截器是比较粗糙的。它只实现拦截。它需要优化限制。不能每次请求任何一个页面，失败或者成功都会给你。拦截提示，这其实对用户体验很不友好，之前的开发需求需要做一些优化，今天总结一下优化后的代码importaxiosfrom'axios';从“@/router/routers”导入路由器；import{Notification,MessageBox}from'element-ui';//ele的提示框importstorefrom'../store';从'@/utils/auth'导入{getToken}；//这里封装了Customtoken方法importConfigfrom'@/config';//项目全局配置环境//1.创建一个axios实例constservice=axios.create({baseURL:process.env.VUE_APP_BASE_API,//的requestbasepathoftheprojectinterfacetimeout:config.timeout//requesttimeout});//2.request拦截器service.interceptors.request.use(config=>{//限制1登录界面不传tokenif(getToken()&&config.url!='auth/login'){config.headers['Authorization']='Bearer'+getToken();//每个post请求携带自定义token，请根据实际情况修改.bearer可以看'https://www.jianshu.com/p/8f7009456abc'}config.headers['Content-Type']='application/json';returnconfig;},error=>{//`处理请求错误`console.log(error);//打印调试Promise.reject(error);});//3.response拦截器service.interceptors.response.use(response=>{constcode=response.status;//这个就是我要说的限制2.根据状态码弹出提示if(code<200||code>300){Notification.error({title:response.message});returnPromise.reject('error');}else{returnresponse.data;}},//限制条件3对状态码、超时、网络、过期错误进行详细提示=>{letcode=0;try{code=error.response.data.status;}catch(e){if(error.toString().indexOf('错误：超时')!==-1){Notification.error({title:'网络请求超时',duration:2500});returnPromise.reject(error);}if(error.toString().indexOf('错误：NettworkError')!==-1){Notification.error({title:'网络请求错误',duration:2500});返回Promise.reject(错误);}}if(code===401){MessageBox.confirm('登录状态已过期，您可以停留在该页面或重新登录','系统提示',{confirmButtonText:'重新登录',cancelButtonText:'Cancel',type:'warning'}).then(()=>{store.dispatch('LogOut').then(()=>{location.reload();//为了重新实例化vue-router对象以避免bug});});}elseif(code===403){router.push({path:'/401'});//让它跳转到401}else{consterrorMsg=error.response.data.message;if(errorMsg!==undefined){通知。错误（{标题：errorMsg，持续时间：2500}）;}}返回Promise.reject(错误);});导出默认服务;
