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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。