受欢迎的博客标签

微信小程序Promise、async、await解决异步请求问题系列之串行执行用法

Published

1.promise异步函数串行执行

/**1.promise基础用法**/
    function test(index,waitTime) {
	   var p = new Promise(function(resolve,reject){
	     setTimeout(()=> {
          console.log('test方法执行' + index);
		  resolve('promise返回数据' + index);
        }, waitTime);
	   });
	   return p;
	}
	
    
	test(1,2000).then((data) => {
	    console.log(data);
		return test(2,100);
	}).then((data) => {
	    console.log(data);
	});

执行结果
可保证串行执行,方法一必定在方法二前执行。

2.循环内异步Promise用法

循环里面都有异步事件,但我们想要得到所有循环的异步事件返回后,再执行之后的方法:
这里涉及到Promise.all(Array)函数,该函数会在Array执行完,才执行then

function promiseFunc(index) {
	   var p = new Promise((resolve,reject) => {
	       setTimeout(() => {
		       resultArr.push(index);
			   resolve();
		   },2500);
	   });
	   return p;
	}
	
	var resultArr = [];
	var promiseArr = [];
	for(var i = 0 ; i < 10 ; i++) {
	    promiseArr.push(promiseFunc(i));
	}
	Promise.all(promiseArr).then(() => {
	    console.log('最终结果' + resultArr);
	});

执行结果

3.async、await用法

1.await必须在async声明的函数内,否则是错误的语法。
2.由于使用async、await主要为了控制异步执行顺序,并且async函数的返回是一个promise对象,所以一般建议跟promise连用

通过async/await,实现上面循环内异步功能

function promiseFunc2(index) {
    var p = new Promise(function(resolve,reject){
	     setTimeout(()=> {
          console.log('test2方法执行' + index);
		  resolve('promise2返回数据' + index);
        }, 2000);
	   });
	   return p;
}

//async返回的是promise对象
async function demoAsyn() {
    let res1 = await promiseFunc2(1);
	let res2 = await promiseFunc2(2);
	let res3 = await promiseFunc2(3);
	return res1 + res2 + res3;
}
demoAsyn().then((res) => {
    console.log(res);
});

执行结果