今天写了Vue的异常处理和Vue防抖动,思考了好久,终于写出来了,这里记录一下我写的过程。
首先说一下需求,异常处理的需求就是,判断后端传过来的code是什么,进行判断来显示。比如哦code==0就成功,code== 'not_login'就显示没有登录之类的,还有请求超时,就显示请求超时。
防抖动的需求就是让用户不能在一个时间段多次点击一个按钮
话不多说,上代码了
- 首先先封装一个函数,其他地方都可以用这个函数,我封装在新建的一个common下名字叫warn.js的一个文件。
import { Message } from "element-ui";
export function warn(res){
if(res.code == "message_page"){
Message.info('对不起,该操作你没有权限!')
}else if(res.code == "not_login"){
Message.info(res.data.msg)
that.$router.push({
path:"/login"
})
}else{
Message.info(res.data.msg)
}
}
- 然后在请求在请求的api里面判断,例如像这样
if(res.data.code == 0){
this.$message({
type:"success",
message:"登录成功"
});
}
else{
warn(res)
}
- 现在要考虑防抖动了
- 防抖动我是这样写的,在data里面初始化了res和TIMEOUT_THRESHOLD和date,这三个都有用,res是异常处理的时候需要,TIMEOUT_THRESHOLD是请求超时的初始化时间,初始化的是5s,如果超过5s就显示请求超时。date是初始化当前时间防抖动需要的。
res:{},
TIMEOUT_THRESHOLD: 5000,
date: new Date(),
- 然后在按钮的函数上面进行了,我的函数名叫submitLogin,我写的防抖动的时间是2s。就是说上次点击按钮的时间和当前点击按钮的时间都获取到,然后相减看是否大于2s。
submitLogin(loginform) {
var date1 = new Date();
console.log(date1 - this.date)
if(date1 - this.date > 2000){
this.date = date1
this.$refs[loginform].validate((valid) => {
if (valid) {
// 请求超时时间为5s
loginsub(this.loginform, { timeout: this.TIMEOUT_THRESHOLD }).then(res =>{
this.res = res
if(res.data.code == 0){
this.$message({
type:"success",
message:"登录成功"
});
}
}).catch(error => {
if (error.code === 'ECONNABORTED') { // 判断是否为请求超时错误
alert('未联网,请求超时,请联网再试')
}
else {
console.log('this.res.data',this.res.data)
warn(this.res)
}
})
} else {
console.log('error submit!!');
return false;
}
});
}else{
this.$message({
type:"info",
message:"两秒后再试试"
});
this.date = date1
}
},
- 现在就可以实现异常处理和防抖动了,觉得有用的话点个赞吧。