vue axios封装httpjs,接口公用配置拦截操作
做一下记录,在vue项目中配置公用的请求https,
(1)位置,在src中新建src/utils/http.js
importaxiosfrom'axios'//引用axios import{MessageBox,Message}from'element-ui' importQsfrom'qs'//引入数据格式化 importrouterfrom'@/router' //axios配置 axios.defaults.timeout=50000//设置接口响应时间 //axios.defaults.baseURL='https://easy-mock.com/mock/'//这是调用数据接口,公共接口url+调用接口名 lethttpUrl=window.location.host if(httpUrl.indexOf('.com')!==-1){ console.log('生产环境',httpUrl) }elseif(httpUrl.indexOf('.net')!==-1){ console.log('测试环境',httpUrl) axios.defaults.baseURL='http://www.test.com'//这是调用数据接口,公共接口url+调用接口名 }elseif(httpUrl.indexOf('localhost:8088')!==-1){ console.log('指定开发环境',httpUrl) axios.defaults.baseURL='http://localhost:8088/' }else{ console.log('开发环境',httpUrl) axios.defaults.baseURL='http://192.168.6.138:8080/'//这是调用数据接口,公共接口url+调用接口名 } //httprequest拦截器,通过这个,我们就可以把Cookie传到后台 axios.interceptors.request.use( config=>{ if(config.method=="post"){ //console.log('请求路径',config.url) if(config.url==='/b/login/checkLogin'){ config.headers={ 'Content-Type':'application/x-www-form-urlencoded'//设置跨域头部 } config.data=Qs.stringify(config.data) }elseif(config.url==='/b/carModel/createCarModelVersion'){ //此处设置文件上传,配置单独请求头 config.headers={ 'Content-Type':'multipart/form-data' } }else{ letuserInfo=localStorage.getItem('userInfo') if(userInfo===null){ returnnull } letbToken=localStorage.getItem('btoken') if(bToken===null){ }else{ config.data.vwToken=bToken } config.headers={ 'Content-Type':'application/x-www-form-urlencoded'//设置跨域头部 } config.data=Qs.stringify(config.data) } }else{ console.log("get请求") } returnconfig }, err=>{ returnPromise.reject(err) } ) //httpresponse拦截器 axios.interceptors.response.use( response=>{ //console.log('请求拦截返回参数',response) if(response.status===200){ //成功 letreturnCode=response.data.code if(returnCode>10000&&returnCode<20000){ //console.log('成功',response) Message.success(response.data.msg) }elseif(returnCode>=20000&&returnCode<30000){ //只弹窗,不操作 //console.log('失败1',response) Message.error(response.data.msg) }elseif(returnCode>=30000&&returnCode<40000){ //只弹窗,点击跳到登入页 localStorage.removeItem('userInfo') MessageBox.confirm(response.data.msg,'确定登出',{ confirmButtonText:'重新登录', cancelButtonText:'取消', type:'warning' }).then(()=>{ //console.log('此处应退出登录重新实例化') router.push({path:'/login'}) }) } } returnresponse }, error=>{ //console.log('error',error.toString()) if( error.toString().trim()=== "TypeError:Cannotreadproperty'cancelToken'ofnull" ){ localStorage.removeItem('userInfo') MessageBox.confirm( '会话凭证失效,可以取消继续留在该页面,或者重新登录', '确定登出', { confirmButtonText:'重新登录', cancelButtonText:'取消', type:'warning' } ).then(()=>{ //console.log('此处应退出登录重新实例化') router.push({path:'/login'}) }) } //console.log(error.toString().trim()) if(error.toString().trim()==='Error:NetworkError'){ MessageBox.alert('网络请求异常,请稍后重试','出错了',{ confirmButtonText:'确定', callback:action=>{} }) } returnPromise.reject(error.response.data) } ) exportdefaultaxios /** *fetch请求方法 *@paramurl *@paramparams *@returns{Promise} */ exportfunctionget(url,params={}){ returnnewPromise((resolve,reject)=>{ axios .get(url,{ params:params }) .then(response=>{ resolve(response.data) }) .catch(err=>{ reject(err) }) }) } /** *post请求方法 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionpost(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.post(url,data).then( response=>{ //console.log(response.data.code) resolve(response.data) }, err=>{ reject(err) } ) }) } /** *patch方法封装 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionpatch(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.patch(url,data).then( response=>{ resolve(response.data) }, err=>{ reject(err) } ) }) } /** *put方法封装 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionput(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.put(url,data).then( response=>{ resolve(response.data) }, err=>{ reject(err) } ) }) }
(2)在main.js中引入调用,定义全局
importaxiosfrom'axios' import{post,get,patch,put}from'./utils/http' //将axios添加到原型链上 Vue.prototype.$axios=axios //定义全局变量 Vue.prototype.$post=post Vue.prototype.$get=get Vue.prototype.$patch=patch Vue.prototype.$put=put
(3)在需要用到的.vue页面直接使用
//this.logForm为传参 this.logForm={id:this.selectId,knowledgeVersionId:this.baseValue} this.$post('你的url',this.logForm).then(req=>{ this.logList=req.data this.logList.allCount=req.allCount this.logList.nowPage=req.nowPage this.logList.pageSize=req.pageSize this.loading=false }).catch(err=>{ console.log(err) }) this.$post('/b/checkConfig/updateRelateKnowledge',{id:this.selectId,knowledgeVersionId:this.baseValue}).then(req=>{ console.log(req) if(req.code===10000){ //this.options=req.data this.getConfigList() } }).catch(err=>{ console.log(err) })
补充知识:Vue项目关于axios的二次封装service
一、安装axios:npmiaxios--save
二、在src目录下新建文件service.js
三、在service.js文件中写入以下代码
importaxiosfrom'axios' //创建一个拥有通用配置的axios实例,实例中的配置内容根据实际开发需求而定 exportconstservice=axios.create({ baseURL:'http://***.***.*.**:8080/',//测试环境 timeout:1000*10,//请求超时的毫秒数,如果请求花费超过timeout的时间,请求将被中断 withCredentials:true,//表示跨域请求时是否需要使用凭证,默认fasle headers:{'Cache-Control':'no-cache'}//不允许缓存,需要重新获取请求 }) //添加请求拦截器 service.interceptors.request.use(config=>{ //在发送请求之前做些什么 returnconfig },error=>{ //对请求错误做些什么 returnPromise.reject(error) }) //添加响应拦截器 axios.interceptors.response.use(response=>{ //对响应数据做点什么 returnresponse },error=>{ //对响应错误做点什么 returnPromise.reject(error) })
以上是对axios的初步封装,具体功能根据实际需求在service.js文件中进行配置
四、全局使用使用service(也可以局部使用,稍后会说明局部使用方法)
第一步:在main.js中进行挂载
import{service}from'./service'
Vue.prototype.service=service
第二步:使用
//注意:这里必须要使用async和await,不然请求状态一直是Promise{},拿不到请求数据 asynccreated(){ letdata=awaitthis.service.get('menu/user/tree') console.log(data)//此时能拿到请求的数据 }
五、局部使用service,在组件内先引入再使用
以上这篇vueaxios封装httpjs,接口公用配置拦截操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。