async / await 处理异步流程

一般我们在方法中请求接口，返回数据，成功之后再渲染数据

但当多个含有不同接口的方法同时调用时，因为异步请求的原因，会先执行后边的代码，这种情况就会导致下边使用的来自于接口返回的数据就找不打之类的报错

代码如下 （vue 框架中）
fun1(){
	this.axios.post('/shop/index/listSearch',artistdata).then(res => {
		if(res.data.code==0){
			this.list1 = res.data.data.list
			alert（'fun1'）
		}
	}）
},
fun2(){
	this.axios.post('/shop/index/listSearch',artistdata).then(res => {
		if(res.data.code==0){
			this.list2 = res.data.data.list
			alert（'fun2'））
		}
	}）
},
fun3(){
	this.axios.post('/shop/index/listSearch',artistdata).then(res => {
		if(res.data.code==0){
			this.list3 = res.data.data.list
			alert（'fun3'）
		}
		
	}）
},
fun(){
	this.fun1()
	this.fun2()
	this.fun3()
	if(this.list1.length>this.list2.length){
		alert(1)
	}else if(this.list2.length>this.list3.length){
		alert(2)
	}else if(this.list2.length>this.list3.length){
		alert(3)
	}
}
//这种情况下，调用fun() 函数  执行顺序会是1或2或3 然后再 fun1 、fun2 、 fun3（这三个函数的顺序也是不一定的，但一定是在1/2/3之后的。三个函数的顺序看接口的请求速度）

为了解决这个三个方法异步请求的问题，
想要的执行效果是 fun1 fun2 fun3 1/2/3
解决方法
一句话总结：在你需要异步的函数前加async ；函数内异步的操作如promise、 setTimeout、请求接口前加await；在调用函数的时候前边也加 await；

async fun1(){
	await this.axios.post('/shop/index/listSearch',artistdata).then(res => {
		if(res.data.code==0){
			this.list1 = res.data.data.list
			alert（'fun1'）
		}
	}）
},
async fun2(){
	await this.axios.post('/shop/index/listSearch',artistdata).then(res => {
		if(res.data.code==0){
			this.list2 = res.data.data.list
			alert（'fun2'）
		}
	}）
},
   async  fun3(){
    	await this.axios.post('/shop/index/listSearch',artistdata).then(res => {
    		if(res.data.code==0){
    			this.list3 = res.data.data.list
    			alert（'fun3'）
    		}
    		
    	}）
    },
async fun(){
	await this.fun1()
	await this.fun2()
	await this.fun3()
	if(this.list1.length>this.list2.length){
		alert(1)
	}else if(this.list2.length>this.list3.length){
		alert(2)
	}else if(this.list2.length>this.list3.length){
		alert(3)
	}
}
现在执行的效果就是 fun1 - fun2 - fun3 - 1/2/3

async / await 处理异步流程

猜你喜欢