From the title:

【 title 】

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

The answer:

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout
Copy the code

Related knowledge:

Ruan yifeng’s explanation is easier for me to understand:

An async function returns a Promise object. When the function executes, it returns an await object, waits until the triggered asynchronous operation is complete, and then executes the following statement in the function body. It can be understood as giving up the thread, out of the async function body

And then, the output sequence is not what we expected

async1 end
promise2
Copy the code

==async==

The async Function declaration defines an asynchronous function that returns an AsyncFunction object. When an async function is called, a Promise object is returned. When the async function returns a value, the Promise’s resolve method takes care of passing the value; When async throws an exception, Promise’s Reject method also passes the exception.

So now you know that with async, when it’s called, it returns a Promise object.

Let’s see what the await expression execution returns.

await

Syntax: [return_value] = await expression; Express: A Promise object or any value to wait for. Return value (return_value) : Returns the result of processing the Promise object. If you are waiting for something other than a Promise object, the value itself is returned.

So, when the expression following the await operator is a Promise, its return value is actually the argument to Promise’s resolve callback.

With those two things in mind, I’ll say a few more words. We all know that Promise is an immediate function, but its success (or: reject) callback, resolve, is an asynchronous one. When resolve() is executed, the task is placed in the callback queue, waiting for the event loop to pick it up when the call stack is free.

Answer:

When async1 is executed, “async1 start” is printed (needless to say, functions defined by async expressions are executed immediately).

Async2 () is a function defined by async, so “console.log(‘async2’)” is executed and async2 returns a Promise with an important point: At this point, the returned Promise will be placed in the callback queue to wait, the await will give way to the thread (js is single thread), and async1 will exit and continue executing.

And then execute to a new Promise, which is implemented immediately, so print “promise1”, and when execute resolve, resolve is put in the callback queue and wait, Then jump out of the Promise and proceed, printing “Script end”.

Now comes the main event. The synchronous event loop is finished, the call stack is now empty, and the event loop will fetch the task from the callback queue and put it on the call stack.

Resolve (resolve) will be queued to wait, and async1 will continue to perform the next task.

Yohoo ~ The resolve callback is placed on the call stack, printing “promise2”, and then proceeds to the next task.

As you’ve probably guessed, the call stack is empty again, and the event loop moves on to the next task: the Promise’s resolve callback!! Execute it (nothing will be printed because async2 doesn’t return anything, so resolve is undefined), and the Promise defined in await has been executed and returned, So we can proceed to the task after async1, which is “console.log(‘async1 end’)”.

Then the synchronous (or sometimes asynchronous) callback is finished, and the timer in the wait queue is executed, printing setTimeout


conclusion

  1. The call stack
  2. Event loop
  3. Task queue
  4. Promise’s callback function executes
  5. The return value of async expression
  6. The function and return value of await expressions

Queue task priority:promise.Trick()>Promise the callback>setTimeout>setImmediate

At this point, the analysis of the output result of this problem is completed, the execution result of this kind of can be summarized in a sentence, first execute synchronous code, encounter asynchronous code first join queue, then execute asynchronous code according to the queue order, and finally execute setTimeout queue code.

The original address: https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html