Vue中使用定时器实现轮询setTimeout

需求：扫描二维码登录，生成二维码后需要通过轮询来判断登录状态。

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()
  }