Vue中使用定时器实现轮询setTimeout
最近做一个扫码二维码的需求,生成二维码后需要通过轮询在判断登录状态。这里我先用的定时器简单的实现了一下轮询,后面会对接到websockethandleQrcodeCheck() {let vm = this;vm.timer_id = setTimeout(() => {//vm.timer_id需要先在data中定义vm.$http...
·
需求:扫描二维码登录,生成二维码后需要通过轮询来判断登录状态。
async getQrcode() {
this.clearTimer()
let res = await this.$http.post("account/loginbyqrcode")
this.loginQrcode = "data:img/jpg;base64," + res.Data.qrcode;
this.handleQrcodeCheck();
},
async handleQrcodeCheck() {
let timerId = await new Promise(resovle => {
let timerId = setTimeout(async () => {
try {
let res = await this.$http.post("account/checkloginqrcodestatus");
this.clearTimer()
this.$message({
message: "登录成功",
type: "success"
});
this.$router.push({ path: "/home/index" });
} catch (err) {
console.log(err);
this.handleQrcodeCheck();
}
}, 1000);
resovle(timerId);
});
this.timerIdEnd = timerId; //在data中定义,它永远是最后一个定时器的id
},
clearTimer() { //清除最近的100个定时器,如果只清除最后一个,会出现bug
let end = this.timerIdEnd;
let start = end - 100 > 0 ? end - 100 : 0;
for (let i = start; i <= end; i++) {
clearTimeout(i);
}
}
这里需要注意下,如果用户生成了二维码,开始轮询。用户如果不扫码,当你点击别的页面时,轮询依然会继续,所以我们一定要在跳转页面时也需要清除定时器,不然会一直占用服务器资源。在vue的生命周期函数beforeDestroy加上
beforeDestroy() {
this.clearTimer()
}
更多推荐
已为社区贡献11条内容
所有评论(0)