This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

1. Why async and await are introduced

① Using promises to solve asynchronous functions is still not concise enough

(2) Promise’s THEN chain-passing parameters are still complex

Promise is used to solve multiple layers of nested callback functions, and async/await is used to optimize multiple THEN chain calls and pass arguments to promise.

2.async/await

Operationally: Syntactic sugar for Generator functions. The async function replaces the asterisk (*) of Generator functions with async and yields with await.

Functionally, the: await command is the syntactic sugar of the internal then command.

2.1 Async function:

Declare a function to be asynchronous.

Function async returns a Promise object.

So if a function returns a promise, you don’t need to use the async declaration.

If async declares a function that is not a Promise object, async encapsulates the direct value as a Promise object via promise.resolve (). Async returns promsie.resolve (undefined) even if there is no return value.

Await keyword:

Await can only be written in async functions

Await is an operator that performs an operation on the value of the following expression to obtain the final result (we can define a variable to accept the result and pass it to the next asynchronous operation as a parameter).

Very very important!!!!!! :

  • Await is not followed by a Promise object:Will awaitblockingThe following code first executes the synchronized code outside of the async, then goes back inside the async and takes the non-promise as the result of the await expression.
  • After the await is a Promise object:Will awaitblockingThe following code executes the synchronization code outside of async, waits for the Promise object to resolve, and then obtains the value of resolve as the result of the computation of the await expression.

Example: There are three steps, but each step requires the results of the previous steps.

function step1(n) { 
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}
function step3(k, m, n) {
    console.log(`step3 with ${k}.${m} and ${n}`);
    return takeLongTime(k + m + n);
}
Copy the code

Implement it as a Promise:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
    .then(time2= > {
        return step2(time1, time2)
            .then(time3= > [time1, time2, time3]);
     })
    .then(times= > {
        const [time1, time2, time3] = times;
        return step3(time1, time2, time3);
     })
    .then(result= > { console.log(`result is ${result}`);
        console.timeEnd("doIt");
    });
}
doIt();
Copy the code

Written async/await:

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
Copy the code

2.3 Advantages of async function (improvement) :

  • Better semantics to synchronize code for asynchronous operations
  • It is more convenient to pass parameters in a PROMISE’s THEN chain
  • The return value is a PROMISE object, and you can use the THEN method to specify the next action.

Reference:

The order of execution of an interview question:

1. www.cnblogs.com/fundebug/p/…