This is the 15th day of my participation in the August Text Challenge.More challenges in August

async/await

According to MDN, async is a function that executes asynchronously and implicitly returns a Promise as a result. Asynchronous execution and implicit Promise return.

Implicit return: You can see that the async labeled function finally returns a Promise object after execution.

async function foo(){
  return 2 
}
console.log(foo()) //Promise {<fulfilled>: 2}
foo().then((val)=>{console.log(val))} //2
Copy the code

That corresponds to the Promise

function foo(){
  return new Promise((resolve)=>{
    resolve(1)
  })
}
console.log(foo()) //Promise {<fulfilled>: 1}
foo().then((val)=>{console.log(val)}) //1
Copy the code

An async function returns an await object. See what an await object is

async function foo() {
    console.log(1)
    let a = await 100
    console.log(a)
    console.log(2)
}
console.log(0)
foo()
console.log(3)
Copy the code

The result: 0-1-3-100-2

To put that in perspective, the external environment is the parent coroutine, and Foo is the child coroutine

  1. First I execute console.log(0)

  2. The parent coroutine then gives the thread execution to the Foo coroutine. Since the foo function is flagged by async, the JavaScript engine keeps the current call stack and so on. The foo coroutine executes console.log(1) and encounters await 100, at which point the Foo coroutine creates a promise

    let promise_ = new Promise((resolve,reject)=>{
  resolve(100)
})
Copy the code

    You can see that the resolve function is called in the Executor function, and the JavaScript engine submits the task to the microtask queue.

    The JS engine then suspends execution of the current Foo coroutine, gives control of the main thread to the parent coroutine, and returns the newly created promise_ object to the parent coroutine. One more thing for the parent coroutine is to monitor the change of the promise_ state using the callback function in the promise_

  3. The parent coroutine then executes console.log(3) and prints 3. The parent coroutine is about to finish execution, and before the end of execution, the parent coroutine checks for microtasks and executes the microtask queue. A resolve(100) task is waiting to be executed. Promise_ Invokes the callback function in Promise_. Then after execution

    Promise_.then ((value)=>{// the callback is activated to give control of the main thread to the foo coroutine and pass the vaule value to the coroutine})Copy the code

    When activated, the callback gives control of the main thread to the coroutine of foo, along with the value. Once the foo coroutine gets the main thread execution, it assigns the value to variable A, and then the foo coroutine proceeds with console.log(2), which returns control to the parent coroutine.

    So await is promise.then

To sum up: Resolve () is returned to the parent coroutine. When the parent coroutine executes the microtask queue, the promise_. Then callback is triggered. The execution and return values are then given to the child coroutine in the callback function.