vue中axios的封装问题(简易版拦截,get,post)
第一步还是先下载axios
npminstallaxios--save
第二步/src/utils/目录下建立一个htttp.js
importaxiosfrom'axios'; axios.defaults.timeout=5000; axios.defaults.baseURL=''; //httprequest拦截器 axios.interceptors.request.use( config=>{ //consttoken=getCookie('名称'); config.data=JSON.stringify(config.data); config.headers={ 'Content-Type':'application/x-www-form-urlencoded' } //if(token){ //config.params={'token':token} //} returnconfig; }, error=>{ returnPromise.reject(err); } ); //httpresponse拦截器 axios.interceptors.response.use( response=>{ if(response.data.errCode==2){ router.push({ path:"/login", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } returnresponse; }, error=>{ returnPromise.reject(error) } ) /** *封装get方法 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionfetch(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=>{ resolve(response.data); },err=>{ reject(err) }) }) }
第三步
在main.js中引入
import{post,get}from'./utils/http' //定义全局变量 Vue.prototype.$post=post; Vue.prototype.$get=get;
最后在组件里直接使用
mounted(){ this.$post('/api/v2/movie/top250') .then((response)=>{ console.log(response) }) },
其余的方法一样
总结
以上所述是小编给大家介绍的vue中axios的封装问题(简易版拦截,get,post),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。