关于vue.js:vue递归轮询实现扫码支付

本文是由Vue的SPA对接到外接设备的驱动进行交互，须要从后端接口获取领取链接传输到外接设备（大屏幕的智能设施）生成二维码。（当然也能够通过领取链接本人转成二维码）

首先定义一个单选组，有两种领取形式：“微信”，“支付宝”领取形式。paySucceed为true示意领取胜利，则提醒领取胜利，暗藏掉领取单选

      <el-radio-group v-model="payWay" @change="payWayChange" v-if='paySucceed === false'>
        <el-radio label="wechat" >微信</el-radio>
        <el-radio label="ali">支付宝</el-radio>
      </el-radio-group>

payWayChange校验

因为外接设备的电脑驱动服务次要是通过websocket进行数据交互的，所以须要在一开始通过webSocket.OPEN去验证websocket以后浏览器与驱动/设施是否失常连贯中，如没连贯上进行提醒并中断以后的操作。
当然在校验的时候须要重置（初始化）外接设备、领取状态、定时器。

开始领取

获取领取的一些参数并通过接口(getPayStatus)获取到领取的url链接，调用openQRcode传递链接到外接设备上,显示出二维码进行领取（这里能够应用qrcode的js库转成二维码图片跳转页面的模式显示出二维码）。
在这里是调用openQRcode办法只是个举例，外接设备个别都会有提供本人驱动以及对接驱动的js，依照本人的理论状况来。

领取中（轮询）

当二维码胜利显示后立刻调用queryStatus()利用获取到的订单号为参数进入一个领取状态的查问（应用setTimeout轮询）
queryStatus外部是一个没通过包装的申请，当申请返回payStatus示意以后未领取实现，或在领取中，否则为领取胜利。
每隔3秒轮询一次（尾递归queryStatus获取领取状态 胜利 or 失败）:

  window.pollTimer = setTimeout(() => {
                return queryStatus(); //轮询查问领取状态3s
              }, 3000)

在queryStatus中的申请应用了axios，是因为这里的post包装申请pending过程中主动加上了“加载中。。。”的全屏界面动画，因为轮询是一直进行的不能显示加载动画，否则会造成每次获取状态都会始终呈现加载动画敞开/显示的闪屏成果，所以这里应用原生axios

领取实现

领取胜利后就进行提醒，达成递归终止条件，革除掉计时器，重置领取的状态。最初5s计时器是为了给个小提早，避免设施上领取胜利后就秒关掉了界面 ，没有显示领取胜利的问题

if ((res.payStatus == 2) || (res.payStatus == 1)) { //领取胜利，敞开弹窗
            that.paySucceed = true;
            window.pollTimer && window.clearTimeout(window.pollTimer);
           //领取胜利后干些事件。。。
            setTimeout(() => {
              that.common.cancelAll();
              that.resetPay();

            }, 5000)
          }

        payWayChange (val) {
        //革除计时器轮询状态
       clearTimeout(window.pollTimer);
       window.pollTimer = null;
      if (webSocket.readyState != webSocket.OPEN) {
        this.$message({
          message: '请正确连贯设施或设施驱动未启动，请查看',
          type: 'error'
        });
        this.resetPay();
        return;
      }

      this.common.cancelAll(); //敞开电子屏领取页
  

      //参数
      let params = {
        type: val === 'wechat' ? 'WeChatPay' : 'AliPay',
        data: {
          paymentType:1,
          id:'123',
          payMoney: '30.0',
          payWay: this.payWay,
        }
      }
      let that = this;

      function queryStatus () {
        window.clearTimeout(window.pollTimer)
        axios({//应用axios，不显示加载中提醒
          method: 'post',
          url: 'getPayStatus',
          withCredentials: true,
          timeout: 0,
          hideLoading: true,
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "token": sessionStorage.getItem('token')
          },
          data: {
            typeCode: val === 'wechat' ? 'WeChat' : 'ali',
            token: sessionStorage.getItem('token'),
            data: {
              order: params.order,
            }
          },

        }).then((res) => {
          if (res.payStatus == 0) {
              window.pollTimer = setTimeout(() => {
                return queryStatus(); //轮询查问领取状态3s
              }, 3000)
          }


          if ((res.payStatus == 2) || (res.payStatus == 1)) { //领取胜利，敞开弹窗

            that.paySucceed = true;
            window.pollTimer && window.clearTimeout(window.pollTimer)
           //领取胜利后干些事件。。。
            setTimeout(() => {
              that.common.cancelAll();
              that.resetPay();

            }, 5000)
          }

        })
      }


      that.post({
          params,//参数
        })
        .then(res => { //获取领取链接和订单信息
          params = params.data;
          params.order = res.order;
          window.delayTimer = null;
          window.clearTimeout(window.delayTimer);
          window.delayTimer = setTimeout(() => {
             //关上领取二维码
 this.common.openQRcode(encodeURI(JSON.stringify(params)) ,encodeURI(res.url))

          }, 1000);
          queryStatus();//开始轮询领取的状态
        });
    },


    resetPay () {
      this.paySucceed = false;
      window.pollTimer && window.clearTimeout(window.pollTimer); //革除计时器轮询状态
    },