day15【微信扫描支付】/15-尚硅谷-谷粒学院-微信支付前端最终实现

那咱看啊，最后这个支付咱该怎么去做啊，我们来到代码中就这位置啊，首先在里边呢，因为咱要按照我们这个方式啊，我们的思路就是我们支付完成之后，每隔一段时间去查一次我们这个接口，看他的状态是否成功，那怎么来做到在里边啊，我们就要用到一个知识点，是咱们在之前讲过的。我这里再说一遍啊，什么知识点呢，在我们JS里边有一个叫定时器的一个方法。这个方法。这个方法是什么呢？不知各位是否记得啊，咱当时演示过这个方法，叫做set。Interval。在里边你可以写你的JS的方法，然后加上你执行的时间，比如我写个3000，那就表示每三秒去盯一次这个方法，所以咱就可以这么做，每三秒去调取我这接口，然后把这个状态做查询，当你查完之后，那里边我们再做跳转，就是它是成功之后我们再做最终跳转，所以现在咱就是这么来做到啊，写个定时器的方法，把这做到当你查完之后，那定时器就不需要再执行，咱再往下我们做其他过程。

这个啊是我们要用到的，那这个过程我们来写一下啊，看看怎么做。首先啊，第一个咱先来一个这么一个date里边我们加几个初始值，为了一会儿我们操作方便。就来一个退。大括号啊在里边，假如我就写这么一个啊，写一个值，比如说叫time。啊，就叫time啊，TIME1了啊，就是这个值啊。这个只干什么，咱们马上来说啊，我先定到这里，然后洗完之后在这里边我们往下来做啊，就刚才我说到咱们要每隔三秒去调一次，我那个接口中查询状态的方法，我要这么来实现。每隔三秒去调用一次咱们查询订单状态的方法，那怎么做呢？就用到我们刚才说那个set interval可以做到，但是这个方法呢，单要就是我支付之后就要去调用，那怎么调用呢。

大家注意啊，咱之前有个方法，这个方法。各位应该知道啊，Create的表示在页面渲之前是不是执行，但是现在你这个写到create里边不太合适，因为咱们是不是叫异步调用，你在异步的时候，它可能数据还没有你去调不合适，所以咱们现在就不能用create，那要用什么？我问各位要用什么？大家想一下啊，咱当时在讲那个视频播放的时候，我们曾经用了一个方法，这方法叫什么？是不是叫那个mount，就是Mo uned mount的表示在你的页面渲之后是不是行，所以咱现在就可以把这个每隔三秒第次方法写到我们的mount中，在这里边实现，因为要在我们页面都渲之后再做调用之前咱调用这数据可能就没有啊，所以我们要这么来做，写到mount中。

我写个注释啊。在你页面。渲染之后直销，那咱们来写一下啊，我说一下怎么做，写这个方法叫set interval。这个方法，然后在里边呢，咱也可以写上这么一个箭头函数啊，就结构是差不多的，我也写个箭头函数，然后加上这么一个结构，加上大括号，在里边呢，写上你的方法体，然后在我们的这个位置写上咱那个执行时间，比如我们是。3000毫秒，然后这里边我们就做这么一个调用就可以了，那我把调的方法咱给他写到下边啊，就这位置。就是methods里边有咱们那个调的方法啊，那我把这个啊，我们给它写一下啊，这些方法，比如我叫这个query，呃，这个order。

The。这个啊是一个方法，然后在方法里边，然后传入那个就是订单的那个订单号，你根据它查一个状态，比如叫O的no，然后在里边咱们调一下我们API中的方法就是O。API。点上这个方法就是它查状态。在里边传入，咱这个叫o no。把这个咱传进去啊，然后传完之后加上这么一个点赞，然后加一个叫。这么一个。箭头函数，通过response，我们可以得到里边那个最终结果，啊，就这里边如果说你是点Z。各位注意啊，看我这个接口中点赞是表示成功了，因为咱们做了这个成功的输出，那里边我就给他直接就写一个写这么一个提示吧，说你这个。支付成功。

啊，就来一个提示信息。那这信息我到这里边，咱就直接复制一下啊，就写它。这是一个提示信息支付成功，然后支付成功之后，咱们肯定是再回到咱那个课程详情页面做那个就是课程的一个最终的一个观看啊，咱要跳转回到。我们的课程的详情的页面，那我们来跳转，跳转方式我就复制了啊，不再敲了，之前单独写过，通过里边这个路由跳转到我们里边去，里边有一个叫扣CD，扣CD呢是咱在这个map这位置啊，咱当时给他。就是有这么一个值啊，就是在这里边啊，咱看一下啊，有一个叫cos ID，把这个给他返回，所以这样的话，这方法我们就写出来了，根据你的订单号查询订单状态，如果说查是成功，那我们就提示支付成功，并且回到将页面。这个啊完成，然后完成之后咱们来到这个位置，在这里边我们写下那个方法题部分，就是做这个方法调用，那咱来调一下啊。

就是this，点上刚才这个方法啊，应该是他，然后方法里边传入咱那个订单号通过这个。这个可以取到啊，就是它。写一个这次点配OBBD，然后点上咱那个订单号的那个名称应该就是。这个名称啊，因为是里边我们设置那个固定的值。把这个咱给他。拿过来。所以这样的话啊，咱们现在把这个结构我们就初步做到了啊，这么一个结构，然后这结构我再说一遍啊，最后咱再测试这过程怎么做到的，咱们在这个就是微信二维码的界面，当我一扫二维码扫完之后，咱是不是要知道我这个支付是否成功了，那怎么做呢？在页面中我们做这个事情写了一个定时器的方法，就叫这个set interval。

在这方法中，咱做的事情就是根据我们的订单号查询订单状态。是否是支付成功，也就是调我们的这个接口，查他的状态是否成功，如果它是成功，那反而就是OK，但在里边啊，就是做这个操作，这个过程中用到一个定时器，每隔三秒去调自然的方法，看它到底是不是成功啊，用这个来做到每隔三秒调方法查一次，当他成功做个跳转，所以咱们按照这个过程做个实现。这个我们就初步做到了啊，这么一个基本流程。但是这么做之后，大家注意啊，这个代码中啊，本身有这么一个小问题，给大家特别说一下啊，那么问题我就直接避免掉了啊，什么问题呢，你注意这个方法。它是不是每隔三秒查一次，我这个就是静态状态，但是现在比如说啊，我这里边如果你做了返回，那这个定时器它还会再执行，就算你成功之后，它也会一直执行，除非你程序停止了，它不执行，只要你服务器是开启状态，那这方法会一直去掉，一直去查，其实查就是只要你夫妻不停，会一直无休止的查下去，这肯定不对。

那咱怎么做注意啊，当我成功之后，我是不是就不需要查了，成功之后呢，那咱就直接啊在里边。让他不查是不是就可以做到，那怎么做呢？只要用到我写这个变量了，那我来给大家写一下啊，在里边比如来一个叫这点。TIME1等于这个值，那怎么做呢？当你成功之后，咱就可以把定时器给它做个清除就可以了，所以我写到这个位置啊。写一下。当你这个。支付成功，那我们就清除这个。定时器把它清除一下，怎么清除呢？有一个方法叫可粒。

In interval，在里边加上，就是咱们刚才写这个开一，因为这是它返回一个值，咱们把值给它清空就可以了，这是一个做法啊，我再说一遍，如果说你不加这句话，只要你这方法执行，它会无休止执行下去，说你服务器关掉，服务器不关，会一直执行，就算你成功它也会再查，但是咱们成功之后肯定它不需要查，那怎么做？在里边加一个叫可利尔特沃，把这定时器给它清除掉就可以做到。这个啊，是咱们写的这么一个结构啊，所以把这个我们就初步做到了啊，当然这里边呢，你可以做一个更严格的一个判断，其实不判断也可以，因为咱们这个状态码啊，应该就是成功的啊，我给他也。写一下吧啊，不写这也是对的啊。写到这个位置，我们也是给他做个判断，就是当他是success啊，咱在做这个事情。所以这样的话啊，咱把它就初步做到了啊，这就是前端部分，主要用到了我们一个定时器的方法把这来实现。

这个完成了啊，但是完成之后呢，最后还有一个问题啊，这并没有完，就这个稍微麻烦一点啊，比会我会在做做做总结，还有什么地方呢，各位看啊，比如我现在我支付之后呢，去查这状态，那他查状态是不是可能这个支付还没有成功呢，如果没有成功的话，它返回的是不是这个值啊。要反映这个叫支付中，但是支付中的话，咱们这里边并不需要做这个，就是让他比如成功或者清除，所以这位置呢，我是怎么做到呢，给大家说一下我们这里边的一个方案啊。来，找个地方。在我这个U里边，咱当时写过这个叫拦截器，我们当时用的是第一个拦截器，这个拦截器就是一个请求拦截器，但你看下面还有拦截器，咱先要用到。这是什么？是不是一个叫响应拦截器，比如说我现在啊，我这里边做了一个处理，什么处理呢？如果说你的状态码是28004，那它就没有登录啊，大家看它这个状态码，那这是什么意思呢？如果说我现在状态码，比如说啊，它是这个状态码。

那咱干什么呢？就让它提示一个叫支付中，并且咱不做任何提示，如果你是别的状态码，它做提示，比如说我们是25000这状态码，它就不做提示，只是在那里一直等待，所以咱们需要做这个处理，就是对这个响应做个操作，当你返回的状态码是25000，那咱就不做任何处理，让他等待支付，当你返是2万，咱才给他提示支付成功，或者说其他操作啊，所以咱最后还需要做这么一个处理啊，那我把这个给大家最终来改一下啊。改的话呢，就是改咱接口那个返回的那个地方。就是改这个地方啊，咱加上一个叫做这个点上啊这里啊。

点上一个叫扣的，然后加一个叫25000。就是对，跟我们这个是定关系，当你状态码是25000，又表示你目前是一个支付中的状态，它不做任何提示，再去发请求，再等待，只要你返回这时支付成功，他才最终做那个页面跳转，所以咱们做这个处理，也就是我在这里边做到的，咱看啊，如果说你不是2万。也不是20005咱做输出，但如果你是20005，咱就不做任何提示，让他去继续等待他支付成功啊，主要是写这部分啊，这稍微复杂点啊，让各位能给他知道这个过程啊。所以现在咱们把这个我们就完成了啊，关于这个微信支付的这么一个流程，最后检查一遍啊，然后咱们最终来做个测试。这个我先重启一下啊，然后咱最后测试一下啊。就是咱们用手机扫完了二维码之后，那这里边我们要去查询你那个支付状态，如果说支付状态是成功，咱就做一个跳转，如他是失败，那我们就还在那里一直等待，我在接口中做一个处理，让他返回叫25000，当时25000，那他就一直等待在里边一直做这个操作啊，主要就是这个过程啊，那咱们重新试一下啊。

你刚才那个页面啊，我给他重新设啊。我先给他退出啊，重新咱们操作啊。现在提前给它清掉啊，然后现在呢，我们来把这个过程完整来试一下啊。还是先把表中数据我先给它都删掉啊。先删一下啊。这些全都给他删掉啊，然后删掉之后我们来最终测试啊。首先在里边登录。登录一下啊。

然后登录之后还是生成一个订单。咱还是用第一个啊，当然这里边其实这个免费是零，你要说会有问题，然后后面会有判断啊，后面咱再完善，先把这个正确结果先做到立即购买到我们这个。页面啊，订单页面，然后在里边，我们现在就是。生成一个二维码，二维码，然后现在我一扫把这个啊，我们做一个支付。啊，我这里边支付是0.01元，各位测试也支付一分钱啊。我现在在微信上我已经支付了，然后大家看看这个啊。提示咱们是不是支付成功，这样的话就跳转回到我们这个页面，然后现在也回到这个页面中，咱这里边就可以直接观看啊，当然你最终效果就是这个位置应该变成立即观看，后面咱再完善，目前这个流程应该就走通了。啊，这个啊是咱们做题过程，所以咱们现在把这个最基本过程做了一个演示，包括你看啊目前的状态。

是不是一有一就表示你订单支付成功了，这个啊，咱就最终完成了啊，主要是这么一个流程啊。包括咱再看个地方啊。就是我们的这个地方，我这里写到查询返回状态的map集合，大家看啊，就是我的这个地方。你注意啊，我这一行代码，我这里边是不是输出了很多次，为什么输入很多次，因为咱是每隔三秒查一次，它是查了很多次之后才成功，最终这条记录才叫成功，前面应该都没有成功，而你看这个返回的map中有咱们需要这些数据，它里边有这个P的名字和它的值，大家看这地方。这个叫tree state。咱写的它如果这个值叫success，它是成功，如果它是这个值表示未支付，就是not配未支付success成功，我这个位置是不是用它做了判断啊，包括根据这个选要我们这个值，你看里边也有它加的值，比如说你什么。

什么等等啊，什么这个订单ID啊，包括什么订单的价格等等里边都有啊，这个我们就最终给他做到了啊，这就是微信支付的一个完成流程啊，咱们把它做一个实现。这个。