56-尚硅谷-微信支付-基础支付APIv3-商户定时查单

目前呢，我们已经完整的完成了用户发起微信支付，那么微信服务器端给我们的服务器发起支付结果通知，并且我们的服务器进行处理的一个流程。那么现在呢，还有一个问题就是我们。打开这个支付二维码进行扫描的时候，那么我们的前端系统或者是说我们的客户端浏览器如何去判断用户当前是否已经扫完码并且支付成功了，用户如果当前没有扫码支付成功，那么我们的浏览器呢，就要停留在这个页面当中，如果用户已经扫码并支付成功，那么这个二维码就不能一直展示在这儿，我们应该呢，给用户展示一个支付成功的页面，所以呢，这个时候我们的前端其实呢，是需要加一个定时器的，来定时查询我们后端的支付订单是否成功，那显而易见，我们后端呢，也要配合做一个接口来查询订单是否支付成功，然后前端来定时调用好，接下来呢，我们就先来实现后端的这个查询订单状态的接口。

我们打开我们的idea。找到我们的order info control了。好在我们的order in controller里面呢，我们添加一个方法查询订单状态query status。那我们呢，希望通过一个订单号来查询订单状态，Pass。Number。Get mapping。那这边我们写query query order。Status。

By order number。这个呢是查询查询本地订单状态，那我们直接从我们商户系统的数据查询就行了，所以我们直接用。Get older status，那这是我们前面已经写过的一个业务方法了。通过查询出我们的order status，好。那么我们来判断一下if。Order status success。我们用枚举。点和谁来比较呢？S和我们查询出来的这个订单状态来比较，如果他们的结果为true的话，那么我们就返回二点，OK，那这个意思呢，就是支付成功。

好，如果返回的结果不为出的话，那么我们就返回2.ok，但是这个OK呢。是另外一种情景，就是支付中set message叫支付中，好，上面这个呢，我们可以给他写上message，支付成功，那么我们之前写二对象的时候呢，我们说如果是成功我们用零表示，如果是失败我们用负一表示，那现在呢，我们定义一个特殊的返回的状态码，就是101，那么我们规定101呢就是支付中，所以呢，我们的前端呢，要对101这个状态码进行判断，如果前端获取到的状态码等于101的话，那么我们前端呢，就会执行一个定时查单的这样的一个任务，一直到我们的状态码等于零为止，啊，那我们就可以做页面的跳转了。

所以呢，我们先来测试一下我们当前的这个接口。重新启动一下服务器。看一看数据库中是不是有之前我们曾经测试过的数据啊，有两个哈，好，那么我们这两个数据呢，一个是支付成功，一个是未支付，所以呢，我们分别来用这个查询一下。在swagger当中我们找到。商品订单管理。找到刚才我们写的这个query order status，那在这面呢，我们写一个order number try it out。好，这个呢是支付成功，我们再来测另外一个订单。

好，查询的结果呢，就是支付中说明这接口呢，还挺好用的哈，那么接下来呢，我们需要在前端来调用这个接口，那么前端的代码呢，其实我们已经写好了，我们来分析一下啊，我们打开前端的代码。和之前一样。首先呢，我们需要在order info.js里面对刚才我们写的这个查询订单状态的接口呢，啊进行一个调用，所以呢，就在这个地方进行了调用，那这个地址呢，就是刚才我们写的接口地址，接下来呢，在前端的。Index这个页面当中，就是我们现在看到的这个页面当中啊，那么。在我们点击确认支付按钮的最后有一个定时器，也就是说在打开二维码弹窗之后，马上呢就会启动这个定时器，意味着当用户看到这个二维码准备拿出手机扫描的时候，那么这个定时任务呢就启动了，它会一直监控着用户是否已经扫码完成并完成支付，所以这个set呢就是前端的javascript当中的一个定时器的功能了，那么它会每隔三秒执行一下这个函数里面的内容。那么第151行代码执行了什么内容呢？我们来看一下。

我们在下面找到query，那么你会发现呢，恰好就是对刚才咱们GS文件里定义的这个query order status远程阿贾克斯方法的一个调用，那么也就意味着在这个位着它定时的执行我们后端的接口来查询我们的订单状态，看一看我们的这个订单呢是否支付成功，那么他一旦判断出我们的响应码是零，就说明呢，我们的这个订单是支付成功的。并且呢，进入到这个if语句当中之后呢，会清除前面我们的定时器。

也就是清除名字叫做R的这个定时器，好清除定时器的方式呢，就是那清除定时器完成之后呢，再等待三秒，我们呢，就会跳转到一个支付成功的页面，好那么现在呢，我们来试一下啊。我们F12先看一下控制台这块，那接下来呢，我们把。定时器呢啊给他。启用一下，也就是说刚才呢，我把注释删掉了，那现在呢，我把文件呢保存一下。好，注意前端V这个下需要TL击。配置不太一样，好，现在呢，我们已经保存了，那所以呢，这个定时器呢又开始工作了，那么我们来看一下我们的前端页面，现在呢，我们来点击我们的确认支付按钮，确保呢我们二维码的弹窗呢能够显示出来，那我们知道二维码的弹窗只要一显示出来，我们的定时器呢就可以开始工作了。

我们关注一下看。那你会发现呢，这里面呢，有一个查询订单状态的这样的一个定时器呢，已经开始工作了，前面的这个数字呢，代表定时器执行的次数哈，好，它每隔三秒执行一次，那么接下来呢，我呢来发起一笔支付。好，那么我们来关注一下这面的订单状态的变化。我来输入支付密码。好，我已经支付完成了。那么现在呢？我们的结果通知呢？正在被调用数据库呢？也正在被修改好，现在呢，我们订单状态查询出最新的结果就是零了，也就是支付成功，并且呢，调用了定时器，好我们的页面呢。

跳转到了支付成功的页面。好，到此为止呢，这就是我们前端加后端的一个完整的支付流程。