2021-04-27

vue轮询,压缩包上传轮询

1.轮询干什么?
我主要是用在上传图片压缩包,如果包大,可能导致上传时间过长,用户体验差
2.轮询怎么做?
定时器.关于轮询和长轮询还是长连接我就在这里一一介绍了,感兴趣的小伙伴可以去度娘看看

示例:压缩包上传情况轮询

点击上传压缩包弹框内的导入按钮

 //上传压缩包导入按钮
    async keepUpImgZip() {
      if (JSON.stringify(this.fileObjData) == "{}") {  //判断导入是否有导入文件
        this.$message({
          type: "error",
          message: "上传文件不能为空",
        });
        return;
      }
      let dataa = {  //访问接口数据
        identity: this.identity,
        repeatRule: this.radio,
        errorRule: this.radioB,
      };
      // FormData 对象,这里后端要求我请求参数类型FormData,看你们的具体需求
      let form = new FormData();
      // 文件对象
      form.append("faceImgZip", this.fileObjData);
      form.append("data", encrypt(dataa));//encrypt是我的加密文件,你们可以木有
      try {
        let {
          data: { status, msg, result },
        } = await this.$store.dispatch("importFaceImages", form);

        this.loading = false;
        if (status === 1000) {//我这里后端返回一个状态码,我需要拿到状态码去请求轮询接口
          this.handleQrcodeCheck(result);
        } else {
          this.$message({
            type: "error",
            message: msg,
          });
          this.noticeModal = false;
          return;
        }
      } catch (err) {
        console.log(err);
      }
    },

具体的轮询方法

    async handleQrcodeCheck(key) {//轮询方法
      this.percentage = 50;//percentage为element的进度条
      //timer:null是data中定义的初始值,clearInterval()只是暂停定时器,彻底清除还是需要手动赋值为null,回收定时器
      this.timer = setInterval(async () => {
      //setInterval一直执行回导致页面卡死,setTimeout则带清除 功能
        setTimeout(async () => {//异步操作需要es6 async
          try {
            let {
              data: { status, result, msg },
            } = await this.$store.dispatch("importConf", {//这是我封装的接口,你们可以使用axios访问轮询接口
              key: key,
            });
            if (result !== "null") {//返回结果不为空,证明导入成功,清除定时器
              this.percentage = 100;//percentage为element的进度条,请求成功完成度100%
              this.$message({
                type: "success",
                message: msg,
              });
              clearInterval(this.timer);
              this.timer = null;
            } else {//导入未返回结果,继续轮询,在这之前先清除定时器,防止页面卡死
              clearInterval(this.timer);
              this.percentage = 70;//percentage为element的进度条
              this.timer = null;
              this.handleQrcodeCheck(key);//自己调用自己继续轮询
            }
          } catch (err) {
            console.log(err);
          }
        }, 0);
      }, 1000);//一秒轮询一次
    },

关闭进度条显示框清除定时器

 closeUpdlag() {
      this.fileObjData={}//清除导入的文件缓存
      this.dialogVisibleAAA = false;//关闭进度条显示框
      clearInterval(this.timer);//清除定时器
      this.timer = null;//手动清除回收定时器
    },