开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：微信支付前端最终实现】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11498
微信支付前端最终实现
内容介绍：
一、支付做法
二、编写程序
三、测试
一、支付做法
思路：支付完成之后，每隔一段时间就查一次接口，看它的状态是否成功。
做法：运用到一个知识点，在js里面有一个定时器的方法
setInterval(“js 方法”,3000)
每三秒调一次接口，把状态做个查询，成功之后做跳转。
二、编写程序
在_pid.vue 中，45行开始写
data(){
return{
timer1:’’
}
},
//每隔三秒调用一次查询订单状态的方法
mounted(){ //页面渲染之后执行
setInterval(()=> {
this.queryOrderStatus（this.payObj.out_trade_no）
},300)
},
methods:{
queryOrderStatus(orderNo){
ordersApi.queryPayStatus(orderNo)
.then(response => {
//提示
this.$message({
type:’success’,
message:’支付成功’
})
//跳转回到课程详情页面
this.$router.push({path:’/course/’+this.payObj.course_id})
三、测试
总结过程：在微信二维码的界面扫二维码，扫完之后需要知道支付是否成功。
在页面中写了一个定时器的方法，即 setInterval，在方法中我们做的是根据订单号，查询订单状态是否是支付成功，若成功，反映是 ok，做这个操作用这个定时器每隔三秒调方法查询成功，成功即可跳转。
这个代码有一个小弊端，如果做了返回，定时器还会继续执行。
修改后如下所示
data(){
return{
timer1:’’
}
},
//每隔三秒调用一次查询订单状态的方法
mounted(){ //页面渲染之后执行
this.timer1 =setInterval(()=> {
this.queryOrderStatus（this.payObj.out_trade_no）
},300)
},
methods:{
queryOrderStatus(orderNo){
ordersApi.queryPayStatus(orderNo)
.then(response => {
if <response.data.success){
//支付成功，清除定时器
clearInterval(this.timer1)
//提示
this.$message({
type:’success’,
message:’支付成功’
})
//跳转回到课程详情页面
this.$router.push({path:’/course/’+this.payObj.course_id})
})
查状态时可能会支付没有成功，如果没有成功的话，返回的则是支付中，此时不需要跳转到支付成功或清除定时器。
方案为
在 util 中写过拦截器，当时用的是 http request 请求拦截器，现在需要用 http response 响应拦截器。
如果状态码是28004，则是没有登录。如果状态码是25000，则是订单支付中，不需要做任何提示。状态码为20000时，则是支付成功。
将 PayLogController 的52行修改为
return R. ok().code(25000).message(“支付中”)
测试：
首先登录，生成一个订单，点击立即购买进入页面，点击支付生成一个二维码，支付完成后，页面提示支付成功，跳转回到课程页面，下拉可以观看视频。
目前状态变成了1，证明订单支付成功。
在查询订单状态 map 集合，查了很多次，因为每三秒查询一次，最后一次才支付成功。notpay 表示未支付，success表示支付成功。
