vue实现的请求服务器端API接口示例
本文实例讲述了vue实现的请求服务器端API接口。分享给大家供大家参考,具体如下:
importaxiosfrom'axios' importrouterfrom'@/router' axios.defaults.timeout=3000 axios.defaults.baseURL='' axios.interceptors.request.use( config=>{ //consttoken=getCookie('名称') config.data=config.data config.headers={ 'Content-Type':'application/json;charset=utf-8' } if(config.url==='/api/login/index'){ }else{ if(localStorage.getItem('Authorization')){ config.headers.Authorizatior=localStorage.getItem('Authorization') } } //if(token){ //config.params={'token':token} //} returnconfig }, error=>{ returnPromise.reject(error) } ) axios.interceptors.response.use( response=>{ //返回错误跳转到首页 if(response.data.code===0){ router.push({ path:'/', querry:{ redirect:router.currentRoute.fullPath } }) } returnresponse }, error=>{ if(error.response){ switch(error.response.status){ case401: localStorage.removeItem('Authorization') router.push('/login') } } 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) }) }) } /** *封装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) }) }) }
main.js调用
import{fetch,post,patch,put}from'@/util/fetch' Vue.prototype.get=fetch Vue.prototype.post=post Vue.prototype.patch=patch Vue.prototype.put=put
视图页面使用
exportdefault{ name:'login', data(){ return{ mobile:'', password:'' } }, components:{ XInput, XButton, Group, Box }, methods:{ handleLogin(){ letparams={} params.username=this.mobile params.password=this.password this.post('/api/driver/index',params).then((data)=>{ console.log(data) }).catch((error)=>{ console.log(error) }) } } }
希望本文所述对大家vue.js程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。