This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

An asynchronous function is the result of applying a contract to a JavaScript function. Asynchronous functions can pause without blocking the main thread. Asynchronous functions are called async/await and are new in Es8.

If you don’t know about asynchrony, see this to understand asynchrony (juejin.cn).

saync

The saync keyword is used to declare asynchronous functions. It can be used for function declarations, function expressions, and arrow functions.

    async function msg(){}
    let jackson = async function(){}
    let jackson = async() = > {}Copy the code

Use the async keyword to make a function asynchronous. In practice it needs to be used with await.

await

Once we define a function as an asynchronous function, we can use the await keyword. This keyword placed before the Promise of the callback will pause the function until the Promise is executed or rejected.

 async function msg(){
        let p = new Promise((resolve,reject) = >setTimeout(resolve,1000.'jackson'));
        console.log(await p);
    }
    msg();//jackson
Copy the code

The await keyword suspends the execution of the code following the asynchronous function. This behavior is the same as yield keyword in a generator function. The await keyword is also the value of the unwrapped object, any operation that passes this value to an expression and then uses async to resume the asynchronous execution.

Stop and resume execution

Let’s do a little chestnut, let’s see if we can guess what we’re going to do, let’s see what we can understand.

    async function jackson(){
        console.log(await Promise.resolve('jackson'));
    }
    async function bear(){
        console.log(await 'bear');
    }
    async function daxiong(){
        console.log('daxiong');
    }
    jackson();
    bear();
    daxiong();
Copy the code

Ha, ha, ha, ha. It’s actually arranged backwards.“Await” keyword is actually quite simple. When js runs upon “await” keyword, it records where execution is suspended. When the value to the right of the await is available and the callback is processed, JS will push a task to the message column pair that will resume execution of the asynchronous function. That way, even if the await is followed by an immediately available value, the rest of the function is evaluated asynchronously.

Asynchronous functions are no real substitute for promises. But the two can work together. An asynchronous function will execute a Promise with await and an asynchronous function always returns a Promise.

Stack tracking and memory management

Scheduled and asynchronous functions are similar in functionality, but their in-memory representation is quite different.

    function fooPromiseExecutor(resolve, reject) {
        setTimeout(reject, 1000.'jackson');
    }

    function foo() {
        new Promise(fooPromiseExecutor);
    }

    foo();
Copy the code

We can see that the error message contains the identifier of the nested function that was called to create the initial reduction instance, but the function actually returned, so the stack trace should not see them.

The JS engine will save as complete a call stack as possible at the time of creation. When an error is thrown, the call stack can be retrieved from the runtime error-handling logic data and thus appears in the stack trace. This will definitely take up more computing costs and memory.

Replace the above example with an asynchronous function, and let’s see

 function fooPromiseExecutor(resolve, reject) {
        setTimeout(reject, 1000.'jackson')}async function foo(){
        await new Promise(fooPromiseExecutor)
    }
    foo();
Copy the code

This becomes an asynchronous function and the stack trace accurately reflects the current call stack. The fooPromiseExecutor has been returned, so there are no errors in it. Foo has been suspended and has not exited. Js can simply store Pointers to containing functions in nested functions at runtime, which is equivalent to a synchronous function call stack. It does not bring additional costs like scheduling. The result is self-evident, and we can consider asynchronism in a limited way when we value performance.