Vue中ES6的Generator和ES7的Async/Wait具体场景应用

一、业务需求分析：最近在做一个小程序中的试卷考试模块，既然说到考试，就得涉及到试卷，我们试卷有两种类型，固定试卷（试题是固定的）和随机试卷，但这两种试卷都是时段试卷，所谓时段试卷就是有明确的开始考试时间和结束时间（都是带年月日时分秒的）。现在用户在界面点击考试按钮，通过把获取的当前时间与查到的两种试卷各自规定的时间进行比较，来显示其中一种试卷或者当前没有考试计划的，主要就通过和当前时间进行比较来决定是否有考试的，以下为界面图片：

二、实现思路：用户界面点击考试进入试卷详情页时，即分别调取后台查询数据库中两种类型试卷的方法（此处假设每种类型试卷都能查到一条数据），此时还不知道使用二者中那一个，但需要把查到的两种类型试卷的考试开始时间和结束时间都拿到，之后通过与获取的当前时间进行一系列的逻辑判断，把符合条件的试卷对象赋值到最终在页面显示而定义的试卷详情对象。

三、技术使用：第一.由于需要一进页面需要同时调用查询两种类型试卷的方法，且调取完后拿到各自考试时间，再需要和当前时间进行比较，为防止查询两种类型试卷的方法未执行完就先去执行时间比较相关的代码，这里使用了ES7的Async/Wait方法，解决异步问题；第二.针对获取两种试卷各自的开始时间和结束时间，以及到底那种类型试卷最终赋值给页面上需要显示的试卷对象，这里使用了ES6的Generator，第一步只是获取开始时间和结束时间，通过与当前获取时间进行比较，再执行其中的一个Generator，解决试卷对象赋值的任务。

四、具体实现代码如下：

methods: {
	
	//请注意async/wait的位置（async） 这是第一处
	async getTimePaper(){
	    //预先定义属性用来接收固定试卷生成器
		var generatorA = null 
		//预先定义属性用来接收随机试卷生成器
		var generatorB = null 
		
		//请注意async/wait的位置（await） 这是第二处
		//根据考核类别查询固定试卷
		await wxPageList(this.queryParam).then(res=>{
			if(res.code == 1){
				if(res.response.list.length > 0){
					this.gPaper = res.response.list[0]
					console.log("固定试卷", this.gPaper)
					//传入试卷对象，对该固定试卷的生成器进行声明
					generatorA = this.gAction(this.gPaper)
					//调取该生成器一次，只为获取该试卷的开始和结束时间
					generatorA.next()
				}
			}
		})
		//请注意async/wait的位置（await） 这是第三处
		//根据考核类别查询随机试卷
		await getRPaperBySubjectId(this.subjectParam).then(res=>{
			if(res.code == 200){
				 if(res.data != null || res.data != ''){
					console.log("随机试卷",res.data)
					this.rPaper = res.data
					//传入试卷对象，对该固定试卷的生成器进行声明
					generatorB = this.rAction(this.rPaper)
					//调取该生成器一次，只为获取该试卷的开始和结束时间
					generatorB.next()
				 }
			}
		})
		
		//由于在以上两个方法上加了async/await的标志，此步骤以上的代码会按顺序一步一步执行完，才执行此步骤以下的代码，不会出现异步执行的问题
		//传入当前时间进行格式化，具体格式例如：2020-06-04 14:00:00
		var currentTime = this.dateFormat(new Date())
		console.log("格式化过的当前时间：",currentTime)
		
		//与当前时间进行一系列比较
		//固定试卷的开始时间 小于 随机试卷的开始时间
		if(this.gPaperStartTime <  this.rPaperStartTime){ 
			if(this.gPaperStartTime > currentTime){
				console.log("显示固定试卷6")
				//满足此条件，则第二次继续执行此Generator
				generatorA.next()
			}else if(this.gPaperStartTime < currentTime){
				if(this.gPaperEndTime > currentTime){
					console.log("显示固定试卷7")
					//满足此条件，则第二次继续执行此Generator
					generatorA.next()
				}else if(this.gPaperEndTime < currentTime){
					if(this.rPaperStartTime > currentTime){
						console.log("显示随机试卷8")
						//满足此条件，则第二次继续执行此Generator
						generatorB.next()
					}else if(this.rPaperStartTime < currentTime){
						if(this.rPaperEndTime > currentTime){
							console.log("显示随机试卷9")
							//满足此条件，则第二次继续执行此Generator
							generatorB.next()
						}else{
							console.log("暂无考试！固定")
						}
					}
				}
			}
		}else if(this.gPaperStartTime >  this.rPaperStartTime){//固定试卷的开始时间 大于 随机试卷的开始时间
			if(this.rPaperStartTime > currentTime){
				console.log("显示随机试卷0")
				//满足此条件，则第二次继续执行此Generator
				generatorB.next()
			}else if(this.rPaperStartTime < currentTime){
				if(this.rPaperEndTime > currentTime){
					console.log("显示随机试卷1")
					//满足此条件，则第二次继续执行此Generator
					generatorB.next()
				}else if(this.rPaperEndTime < currentTime){
					if(this.gPaperStartTime > currentTime){
						console.log("显示固定试卷2")
						//满足此条件，则第二次继续执行此Generator
						generatorA.next()
					}else if(this.gPaperStartTime < currentTime){
						if(this.gPaperEndTime > currentTime ){
							console.log("显示固定试卷3")
							//满足此条件，则第二次继续执行此Generator
							generatorA.next()
						}else{
							console.log("暂无考试！随机")
						}
					}
				}
			}
		}
	},
	//定义的固定试卷的Generator，写法有“*”的标志不要忘记了
	//主要有两步业务，第一步执行只获取开始时间和结束；第二步执行是把此类型试卷对象赋值给页面显示的试卷对象
	* gAction(gObject) {
		this.gPaperStartTime = gObject.limitStartTime
		this.gPaperEndTime = gObject.limitEndTime
		console.log("固定试卷开始时间：",this.gPaperStartTime)
		console.log("固定试卷结束时间：",this.gPaperEndTime)
		//第一次调用会到此步停止，下一次调用的话才接着上一次继续执行
		yield "stop";
		//this.examPaper是data里定义页面上显示的试卷对象，这里通过执行该生成器第二次，才确定符合条件的是固定试卷对象
		this.examPaper = gObject
		console.log("固定试卷的生成器：", this.examPaper)
		return "end";
	},
	//定义的随机试卷的Generator，写法有“*”的标志不要忘记了
	//主要有两步业务，第一步执行只获取开始时间和结束；第二步执行是把此类型试卷对象赋值给页面显示的试卷对象
	* rAction(rObject) {
		this.rPaperStartTime = rObject.startTime 
		this.rPaperEndTime = rObject.endTime
		console.log("随机试卷开始时间：",this.rPaperStartTime)
		console.log("随机试卷结束时间：",this.rPaperEndTime)
		//第一次调用会到此步停止，下一次调用的话才接着上一次继续执行
		yield "stop";
		//this.examPaper是data里定义页面上显示的试卷对象，这里通过执行该生成器第二次，才确定符合条件的是随机试卷对象
		this.examPaper = rObject
		console.log("随机试卷的生成器：", this.examPaper)
		return "end";
	},
	//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
	//这里主要为了格式化获取的当前时间
        dateFormat(time) {
		var date=new Date(time);
		var year=date.getFullYear();
		var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
		var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
		var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
		var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
		var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
		// 拼接成yyyy-MM-dd hh:mm:ss的形式并进行返回
		return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    }
}

五、浏览器相关值的打印效果和顺序如下：

提示：此处查询出来的随机试卷是符合要求的试卷在页面进行显示！