Promise based async and await

  • What are async and await?

Async and await generally exist as a pair of “conjoined twins”, born to serve the Promise. It can be said that async and await are the evolutionary version of Promise, which is the syngrammatical sugar of Promise.

  • Let’s start with async
async function async1(){ ... } // const async async2 = function(){... } / / errorsCopy the code
  • And await must be used inside async functions and must be “straight line”
  • Example:
async function async1(){
    function f1(){
        await console.log(1)
    }
}
Copy the code
  • Uncaught SyntaxError: await is only valid in async function

2. The nature of Async

  • The nature of async is to implicitly return a Promise object
(async function async1(){return 'hello world'})() Promise {<resolved>: "Hello world"Copy the code
  • As you can see, the default return value of a function declared async is a Promise object, which equals
(async function async1(){
    return Promise.resolve('hello world')
})()
Copy the code

3. The nature of await

  • “Await” means to wait for a while. As long as the function declared “await” has not returned, the following program will not execute. This is literally waiting for a while (waiting to return and then execute).
  • Once an await is encountered, the thread is immediately released, the following code is blocked, and after waiting, there are two cases of await
    • Not a Promise object. If it is not a Promise, await blocks the following code, executes the synchronous code outside the async, and then goes back inside the async with the Promise as the result of an await expression
    • Is the Promise object. This will be a pity. Then, the resolve parameter will be used as the result of the await expression.

4. Relevant sample topics

Title 1:

async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}
async function async2() {
    console.log( 'async2' )
}
async1()
console.log( 'script start' )

//async1 start
//async2
//script start
//async1 end
Copy the code
  • It’s important to note that,Async2 () is executed as a synchronization function, so async2 is printed immediately after aycnc1 start

Topic 2:

async function async1() { console.log( 'async1 start' ) await async2() console.log( 'async1 end' ) } async function async2() { console.log( 'async2' ) } console.log( 'script start' ) setTimeout( function () { console.log( 'setTimeout' )  }, 0 ) async1(); new Promise( function ( resolve ) { console.log( 'promise1' ) resolve(); }).then( function() { console.log( 'promise2' ) }) console.log( 'script end' )Copy the code
  • Print result:
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
Copy the code

Await statements are synchronous and all code following await statements are asynchronous microtasks.

Title 3:

async function t1 () {
  console.log(1)
  console.log(2)
  await Promise.resolve().then(() => console.log('t1p'))
  console.log(3)
  console.log(4)
}

async function t2() {
  console.log(5)
  console.log(6)
  await Promise.resolve().then(() => console.log('t2p'))
  console.log(7)
  console.log(8)
}

t1()
t2()

console.log('end')
Copy the code
  • Print result:
1
2
5
6
end
t1p
t2p
3
4
7
8
Copy the code

Topic 4:

async function t1 () {
	console.log(1)
	console.log(2)
	new Promise( function ( resolve ) {
		console.log( 'promise3' )
		resolve();
	} ).then( function () {
		console.log( 'promise4' )
	} )
	await new Promise( function ( resolve ) {
		console.log( 'b' )
		resolve();
	} ).then( function () {
		console.log( 't1p' )
	} )

	console.log(3)
	console.log(4)
	new Promise( function ( resolve ) {
		console.log( 'promise5' )
		resolve();
	} ).then( function () {
		console.log( 'promise6' )
	} )
}

setTimeout( function () {
	console.log( 'setTimeout' )
}, 0 )

async function t2() {
	console.log(5)
	console.log(6)
	await Promise.resolve().then(() => console.log('t2p'))
	console.log(7)
	console.log(8)
}

t1()

new Promise( function ( resolve ) {
	console.log( 'promise1' )
	resolve();
} ).then( function () {
	console.log( 'promise2' )
} )

t2()

console.log('end');
Copy the code
  • Print result:
1
2
promise3
b
promise1
5
6
end
promise4
t1p
promise2
t2p
3
4
promise5
7
8
promise6
setTimeout
Copy the code
  • Note that code beginning the next line of await must wait for the await statement to complete (including the microtask completion) before executing. In other words, all the code behind the await statement will be added to the micro-task only after the following statement is run. Therefore, when an await Promise is encountered, all the code behind the await statement will be added to the micro-task only after the await Promise function is completed. Therefore, While waiting for await promise. then microtask,

  1. Run other synchronization code.

  2. Wait until the synchronous code runs, start running await Promise.then microtask.

  3. Await promise. Then after the micro-task is complete, add all code following the await statement to the micro-task list.