1.新建axiosTool.js文件，设置请求拦截处理逻辑importVuefrom'vue'importaxiosfrom'axios'//取消请求letCancelToken=axios.CancelToken//设置默认请求头，你不需要的可以取消一步axios.defaults.headers={'X-Requested-With':'XMLHttpRequest'}//请求超时的时间限制axios.defaults.timeout=20000//开始设置request发起的拦截流程//config表示发起的request参数的实体axios.interceptors.request.use(config=>{//获取参数中的requestName字段，用于判断下一次请求和cancel相同字段对应的request//如果没有requestName，默认添加不同的TimestampletrequestNameif(config.method==='post'){if(config.data&&config.data.requestName){requestName=config.data.requestName}else{requestName=newDate().getTime()}}else{if(config.params&&config.params.requestName){requestName=config.params.requestName}else{requestName=newDate().getTime()}}//判断，如果这里获取的参数requestName在上次请求中已经存在，则取消上次请求if(requestName){if(axios[requestName]&&axios[requestName].cancel){axios[requestName].cancel()}config.cancelToken=newCancelToken(c=>{axios[requestName]={}axios[requestName].cancel=c})}返回配置},error=>{returnPromise.reject(error)})//请求拦截处理结果axios.interceptors.response.use(config=>{//返回请求的正确结果returnconfig},error=>{//错误请求结果处理，此处代码根据后台状态码判断错误输出信息if(error&&error.response){switch(error.response.status){case400:error.message='Errorrequest'breakcase401:error.message='未经授权，请重新登录'breakcase403:error.message='AccessDenied'breakcase404:error.message='请求错误，资源未找到'breakcase405:error.message='不允许使用请求方法'breakcase408:error.message='请求超时'breakcase500:error.message='server-sideerror'breakcase501:error.message='networknotimplemented'breakcase502:error.message='网络错误'breakcase503:error.message='serviceunavailable'breakcase504:error.message='networktimeout'breakcase505:error.message='http版本不支持此请求'breakdefault:error.message=`connectionerror${error.response.status}`}}else{error.message="Failedtoconnecttotheserver"}returnPromise.reject(error.message)})//将axios的post方法绑定到vueinstance$postVue.prototype.$post=function(url,params){returnnewPromise((resolve,reject)=>{axios.post(url,params).then(res=>{resolve(res)}).catch(err=>{reject(err)})})}//将axios的get方法绑定到vue实例上的$getVue.prototype.$get=function(url,params){returnnewPromise((resolve,reject)=>{axios.get(url,{params:params}).then(res=>{resolve(res)//返回请求的数据data}).catch(err=>{reject(err)})})}//请求示例//requestName是一个额外的参数作为请求标识，下次发起相同的请求时，会自动取消上次未结束的请求//比如normal请求参数只有一个名字：'123'，但是这里我们需要多加一个requestName/**this.$post(url,{name:'123',requestName:'post_1'}).then(res=>{console.log(`成功请求：${res}`)})*/exportdefaultaxios2.将此文件导入main.jsimport{axios}from'./static/js/axiosTool'3。在组件中只需使用this.$post(this.url2,{name:"King",docType:"pson",requestName:'name02'}).then(res=>{console.log(res)})this.$get(this.url,{name:"Li",requestName:'name01'}).then(res=>{控制台.log(res)})
