封装 axios+promise通用请求函数操作
我就废话不多说了，大家还是直接看代码吧~
importaxiosfrom"axios";
importbaseUrlfrom"../../setBaseUrl";
axios.defaults.baseURL=baseUrl;
import{Loading,Message}from"element-ui";
constloadingOptions={
lock:true,
text:"拼命加载中",
spinner:"el-icon-loading",
background:"rgba(0,0,0,0.7)"
};
if(localStorage.token){
axios.defaults.headers.common["x-token"]=localStorage.token;
}
constHttp={
get:function(url:string,data:any,isLoading:boolean){
if(localStorage.token){
axios.defaults.headers.common["x-token"]=localStorage.token;
}
letloading:any;
if(isLoading){
loading=Loading.service(loadingOptions);
}
returnnewPromise((resolve,reject)=>{
axios
.get(url,{params:data})
.then(function(res){
if(isLoading){
loading.close();
}
if(res.data.code===200){
resolve(res.data.data);
}else{
//console.warn("HttperrorInfo===>",res.data);
reject(res.data.message);
}
})
.catch(function(err){
if(isLoading){
loading.close();
}
//console.warn("HttperrorInfo===>",err);
Message({
message:err.message,
type:"error",
duration:2500,
showClose:true
});
});
}).catch(function(err){
Message({
message:err,
type:"error",
duration:2500,
showClose:true
});
});
},
post:function(url:string,data:any,isLoading:boolean){
if(localStorage.token){
axios.defaults.headers.common["x-token"]=localStorage.token;
}
letloading:any;
if(isLoading){
loading=Loading.service(loadingOptions);
}
returnnewPromise((resolve,reject)=>{
axios
.post(url,data)
.then(function(res){
if(isLoading){
loading.close();
}
if(res.data.code===200){
resolve(res.data.data);
}else{
reject(res.data.message);
}
})
.catch(function(err){
if(isLoading){
loading.close();
}
//console.warn("HttperrorInfo===>",err);
Message({
message:err.message,
type:"error",
duration:2500,
showClose:true
});
});
}).catch(function(err){
Message({
message:err,
type:"error",
duration:2500,
showClose:true
});
});
},
put:function(url:string,data:any,isLoading:boolean){
if(localStorage.token){
axios.defaults.headers.common["x-token"]=localStorage.token;
}
letloading:any;
if(isLoading){
loading=Loading.service(loadingOptions);
}
returnnewPromise((resolve,reject)=>{
axios
.put(url,data)
.then(function(res){
if(isLoading){
loading.close();
}
if(res.data.code===200){
resolve(res.data.data);
}else{
reject(res.data.message);
}
})
.catch(function(err){
if(isLoading){
loading.close();
}
//console.warn("HttperrorInfo===>",err);
Message({
message:err.message,
type:"error",
duration:2500,
showClose:true
});
});
}).catch(function(err){
Message({
message:err,
type:"error",
duration:2500,
showClose:true
});
});
},
delete:function(url:string,data:any,isLoading:boolean){
if(localStorage.token){
axios.defaults.headers.common["x-token"]=localStorage.token;
}
letloading:any;
if(isLoading){
loading=Loading.service(loadingOptions);
}
returnnewPromise((resolve,reject)=>{
axios
.delete(url,data)
.then(function(res){
if(isLoading){
loading.close();
}
if(res.data.code===200){
resolve(res.data.data);
}else{
reject(res.data.message);
}
})
.catch(function(err){
if(isLoading){
loading.close();
}
//console.warn("HttperrorInfo===>",err);
Message({
message:err.message,
type:"error",
duration:2500,
showClose:true
});
});
}).catch(function(err){
Message({
message:err,
type:"error",
duration:2500,
showClose:true
});
});
}
};
exportdefaultHttp;
补充知识：vuex刷新页面是store被更新，如何解决数据备份？
我用的方法很简单，在App.vue中的生命周期函数created中，监听页面刷新，在页面刷新的时候，将store的数据及时存储在sessionStorage中，然后刷新完毕后就可以将sessionStorage中的数据再取出来用
created(){//页面刷新store数据备份
if(localStorage.cmstoken){
this.$router.replace("/data");
}else{
this.$router.replace("/");
}
if(sessionStorage.getItem("store")){//在页面加载时读取sessionStorage里的状态信息
this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload",()=>{//在页面刷新时将vuex里的信息保存到sessionStorage里
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
},
以上这篇封装axios+promise通用请求函数操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。