Talking about Async/Await
Handling asynchronous with async/await

Async and await

async: Declare an asynchronous function (async function someName(){...})

• Automatically convert regular functions intoPromise, the return value is also aPromiseObject
• onlyasyncThe asynchronous operation inside the function is executed before it is executed.thenThe callback function specified by the method;
• Asynchronous functions can be used internallyawait。

await: suspending asynchronous function execution (var result = await someAsyncCall())

• Place inPromiseBefore calling,awaitForce other code to wait untilPromiseComplete and return the result;
• Only withPromiseUsed together, not for use with callbacks;
• Only inasyncThe function is used internally.

Await fault tolerance

• awaitThe back needs to be aPromiseObject, if not, will be converted intoPromiseObject
• As long as one of them ifPromiseObject becomesrejectState, then the wholeasyncThe function will interrupt the operation;
• If the status isresolve, then the return value will becomethenThe parameters inside.

async  function f() {
    return await 123
}
f().then(v => { 
    console.log(v) // 123
})

How to be fault tolerant? due toawaitBackpromiseThe result of the operation may berejectedBest to putawaitput into atry {} catch {}in.

awaitAfter the asynchronous operation, if there is no dependency on each other, it is best to trigger at the same time, which will be introduced in the following scenario.

awaitOnly inasyncAmong the functions, if you are in a normal function, an error will be reported.

Async, await advantages and disadvantages

• async with awaitCompared to direct usePromiseThe advantage is thatthenThe call chain can write the code more clearly and accurately;
• The disadvantage is abuseawaitMay cause performance problems becauseawaitWill block the code, maybe the subsequent asynchronous code does not depend on the former, but still need to wait for the former to complete, causing the code to lose concurrency.

var a = 0
var b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
  a = (await 10) + a
  console.log('3', a) // -> '3' 20
}
b()
a++
console.log('1', a) // -> '1' 1

• First functionbExecute first, after executionawait 10Previous variablea still is0,Becauseawait Internally implementedgenerators ，generators Will keep things in the stack, so this timea = 0Was saved
• becauseawait Is asynchronous operation, encounteredawaitWill return immediatelypendingStatefulPromiseThe object temporarily returns control of the execution code, so that the code outside the function can continue to execute, so it will be executed first.console.log('1', a)；
• At this time, the synchronization code is executed, start executing the asynchronous code, and use the saved value for use.a = 10；
• Then there is the regular execution code.

scene one

Write a function and let it returnpromiseObject, the function of this function is2sThen multiply the value by2。

// returns double the value after 2s
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000)
    } )
}

Write another nowasyncFunction so that it can be usedawaitKeyword,awaitPlaced behind is returningpromiseAn expression of the object, so it can be written laterdoubleAfter2seconds The call to the function.

async function testResult() {
    let result = await doubleAfter2seconds(30)
    console.log(result)
}
 testResult() // Open the console. After 2s, the output is 60.

Specific to our code, encounteredawaitAfter that, the code is suspended and waitingdoubleAfter2seconds(30)Finished,doubleAfter2seconds(30)returnpromiseStart execution, after 2 seconds,promisecarried outresolve And returned a value60At this timeawaitOnly get the return value60And then assign it toresult, the pause ends, the code begins to execute, executeconsole.logStatement.

Scene two

We also issue three requests that are not dependent on each other, ifasync/awaitIt seems unwise.

async function getABC() {
  let a = await getA() {}
  let b = await getB() {}
  let c = await getC() {}
  return A*B*C
}

Above we need 2s, B needs 4s, C needs 4s, C needs 3s, we send requests as shown above, there is a relationship of mutual dependence, c, etc. b is executed, b, etc. is executed, starting from the beginning to the end (2+3 +4) = 9s.
At this point we need to usePromise.all()Asynchronous calls are executed in parallel, rather than one after another, as follows:

async function getABC() {
  let results = await Promise.all([ getValueA, getValueB, getValueC])
  return results.reduce((total, value) => total * value)
}

This will save us a lot of time, from the original 9s to 4s, is not very happy, yeah~