详解vue axios二次封装
这段时间告诉项目需要，用到了vue。
刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下
定义公共参数与引入组件：
importaxiosfrom'axios'
importqsfrom'qs'
axios.interceptors.request.use(config=>{
//显示loading
returnconfig
},error=>{
returnPromise.reject(error)
})
axios.interceptors.response.use(response=>{
returnresponse
},error=>{
returnPromise.resolve(error.response)
})
functionerrorState(response){
//隐藏loading
console.log(response)
//如果http状态码正常，则直接返回数据
if(response&&(response.status===200||response.status===304||response.status===400)){
returnresponse
//如果不需要除了data之外的数据，可以直接returnresponse.data
}else{
Vue.prototype.$msg.alert.show({
title:'提示',
content:'网络异常'
})
}
}
functionsuccessState(res){
//隐藏loading
//统一判断后端返回的错误码
if(res.data.errCode=='000002'){
Vue.prototype.$msg.alert.show({
title:'提示',
content:res.data.errDesc||'网络异常',
onShow(){
},
onHide(){
console.log('确定')
}
})
}elseif(res.data.errCode!='000002'&&res.data.errCode!='000000'){
Vue.prototype.$msg.alert.show({
title:'提示',
content:res.data.errDesc||'网络异常',
onShow(){
},
onHide(){
console.log('确定')
}
})
}
}
consthttpServer=(opts,data)=>{
letPublic={//公共参数
'srAppid':""
}
lethttpDefaultOpts={//http默认配置
method:opts.method,
baseURL,
url:opts.url,
timeout:10000,
params:Object.assign(Public,data),
data:qs.stringify(Object.assign(Public,data)),
headers:opts.method=='get'?{
'X-Requested-With':'XMLHttpRequest',
"Accept":"application/json",
"Content-Type":"application/json;charset=UTF-8"
}:{
'X-Requested-With':'XMLHttpRequest',
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
}
}
if(opts.method=='get'){
deletehttpDefaultOpts.data
}else{
deletehttpDefaultOpts.params
}
letpromise=newPromise(function(resolve,reject){
axios(httpDefaultOpts).then(
(res)=>{
successState(res)
resolve(res)
}
).catch(
(response)=>{
errorState(response)
reject(response)
}
)
})
returnpromise
}
exportdefaulthttpServer
封装理由：
1、可以和后端商量好错误码在这统一提示统一处理，省去不必要的麻烦
2、如果做接口全报文加解密都可以在此处理
接口统一归类：
constserviceModule={
getLocation:{
url:'service/location/transfor',
method:'get'
}
}
constApiSetting={...serviceModule}
exportdefaultApiSetting
归类好处:
1、后期接口升级或者接口名更改便于维护
http调用：
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。