Promise, async, await use - the front end of the asynchronous serial execution, serial execution cycle

Foreword

This article is a result of demand in the summary after personal development, more biased in favor of the application, for the promise, async base not go into details. Related articles on the internet a lot, there is a need friends can look, a little knowledge is recommended before reading easier to understand.

1. The first hot pants -promise usage basis - function serial asynchronous execution
fact, even without the use of promise, asynchronous functions by nesting under the asynchronous function to be executed in a can achieve the same effect. But promise to use the code more flexible, but also better code readability.

/**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);
	});

Results of
guaranteed serial execution, the method must be a method of performing two before.
Here Insert Picture Description

2. The inner loop uses asynchronous Promise

In many cases, there are asynchronous events cycle, but we want to get all the cycles of asynchronous events return, after re-execute method:
PS: here involves Promise.all (Array) function, which will be completed in the implementation of Array, only then executed

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);
	});

Results of the
Here Insert Picture Description

3.async、await用法

1.await must be declared within a function async, otherwise it is the wrong syntax.
2. Since the async use, mainly in order to control the await asynchronous execution order, and async function returns a promise is the object, it is generally recommended in conjunction with promise

For chestnut on - by async / await, to achieve the above cycle asynchronous features

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);
});

Results of the
Here Insert Picture Description

Published 21 original articles · won praise 9 · views 30000 +

Guess you like

Origin blog.csdn.net/a5552157/article/details/90701573
Recommended