Promise、async、await用法——前端异步串行执行，循环串行执行

前言

本文只是个人因需求在开发后的总结，更偏向于应用方面，对于promise、async的基础就不赘述了。相关文章网络上也很多，有需要的朋友也可以参考一下，建议有一点点相关知识后再阅读更容易理解。

1.先热下身—promise的基础用法—异步函数串行执行
其实就算不使用promise，通过在异步函数里嵌套下一个要执行的异步函数也可以达到同样的效果。但使用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用法

很多时候，循环里面都有异步事件，但我们想要得到所有循环的异步事件返回后，再执行之后的方法：
PS：这里涉及到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);
});

执行结果