pc端微信二维码支付流程及问题排查

场景

在做pc端的支付时，我们常用的就是生成二维码让用户去扫码支付。
like this：

当然你想像我一样有个二维码支付的图片，还需要先申请微信支付的native支付功能。
native支付会提供一个二维码供用户扫码。
页面内，通常会有一个按钮，通过按钮的点击事件来调用支付接口，支付接口返回的数据如下：

这里面的qrcodeUrl是一个base64格式的图片数据，我们使用image的src属性接收这个数据就能得到一个二维码图片了。

问题

通常的话，会使用一个弹窗内嵌image标签展示二维码，这样就存在一个重复支付的隐患：
用户在扫码支付完成后，如果页面的弹窗未关闭，那二维码就会一直呈现在页面内，会给用户造成未支付的错觉。那么用户就会再次扫描二维码进行支付，这样就会造成重复支付的问题。

---

所以呢，我们需要在用户支付成功之后把弹窗关闭，这样就可以解决这个问题了。
具体的实现方式就是—>
弹窗内部进行支付结果监测的轮询，一旦支付结果监测出为支付成功，就把弹窗关闭。

实现

说起轮询，其实就是频繁的调取接口访问某个状态的变化。
这样的话很容易想起setInterval，但是使用setInterval会有一个问题就是：很任性！
不管不顾：在它内部执行的指令，它可不管你是执行与否，到时间就再次执行。

setInterval的机制就是执行一个异步队列，每次都会把事件添加到队列里面。当前队列为空的时候，会到事件队列里面去取，如果当前队列执行时间长了点，事件队列里面就会被添加很多事件，当前队列执行完成后，事件队列的事件就会短时间内连续触发，相较于我们使用setInterval进行轮询的初衷就会背道而驰。

所以，可以使用setTtimeout来代替setinterval进行实现。在settimeout中循环调用达到轮询的效果，并且settimeout的机制保证了每个事件都是在前一个执行完毕后再执行的。
OK，方法确定下来就可以着手效果实现了。
使用watch监听弹窗v-model绑定的属性：

visible的true和false控制弹窗的开、闭。
watch进行监听可以执行异步方法。在handle函数内使用setTimeout调用支付结果监测的接口进行轮询，并通过接口返回的支付状态字段清除定时器和关闭弹窗。
具体的代码实现就是：

payStatus: {
      handler(newVal) {
        const timer = window.setInterval(() => {
        setTimeout(function () {
          //检测支付结果时需要传的数据
          let data = {
            orderCode: newVal,
          };
          //检测支付结果的接口
          checkPayResult(data).then((res) => {
            if (res.data.code == rayframework_http_success_code) {
              //返回的支付状态字段用来判断是否支付成功
              if (res.data.result.isPaymentSubmited == 1) {
                this.visible = false;
                clearInterval(timer);
              }
            }
          });
        }, 0);
      }, 2000);
      //清除定时器
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      });
      },
    },

这里看着是不是思路清晰，逻辑无误？
可怜见的，我写好的时候也是美滋滋的，直到—>
弹窗关不了！弹窗关不了！弹窗关不了！
没关系！我自查：
我在this.visible=false下面打印this.visible
控制台显示：

这没错啊，既然是false，说明我改visible的值是改好的呀，那为什么弹窗不关闭呢？
想不通……

中午吃饭在想、路上在想、去洗手间在想、喝水在想……
小小的脑袋大大的疑惑，到底这是为什么！
电光火石之间（脑子抽抽），我在this.visible=false上面打印了this.visible
是的，把它当成三明治夹起来，上下都打印，出现了这个：

undefined！！！
很明显，我的data里面是有这个属性，否则我不可能打开弹窗，现在出现undefined是在表明什么???
我是个笨蛋：
明明函数的嵌套关系很多了，明明使用了settimeout函数，明明函数内还使用this，我还是没有考虑this的指向问题，倒是用它用的起劲，出现问题抓耳挠腮就是找不到源头，要不是脑子抽抽，今天晚上睡觉估计梦里都是我改了visible的值，弹窗还是没关，到底为什么。
好在这下找到问题了。
两个解决方案：
①settimeout等函数使用箭头函数（死去的ES6语法突然攻击我）
②在未进入定时器的函数内使用that保存this的属性值，再进行改变值的时候就能直接操作到visible本身了。
至于this.visible=false上面打印出来undefined，下面倒是false是因为这个过程相当于属性重新创建的过程。
可喜可贺，问题顺利排查出来，并且解决方法也有了，这下可以实现了（我用了第二种）：

payStatus: {
      handler(newVal) {
        const timer = window.setInterval(() => {
        let that = this;
        setTimeout(function () {
          let data = {
            orderCode: newVal,
          };
          checkPayResult(data).then((res) => {
            if (res.data.code == rayframework_http_success_code) {
              if (res.data.result.isPaymentSubmited == 1) {
                that.visible4 = false;
                clearInterval(timer);
              }
            }
          });
        }, 0);
      }, 2000);
      //清除定时器
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      });
      },
    },

效果

点击支付操作，内部的click事件调用native支付接口返回qrcodeurl，就是二维码图片

把二维码图片放在弹窗的image标签内

用户扫码，弹窗内进行轮询事件检测支付状态，支付成功弹窗关闭并刷新页面（处理支付状态显示的问题）。
整个流程是不是很清晰，并且相关问题的解决方案也有提供多种噢~
如果这篇文章对您有用，麻烦：