Little insight about async/await

  • Pre-requisite knowledge
  • Understand async/await

Pre-requisite knowledge

  • es6 promise
    • Ruan Yifeng teacher promise resolution
  • Basic use of async await and principle analysis
    • Understand JavaScript async/await
    • The 8 diagrams show you step by step the execution order of async/await and promise

Understand async/await

The paper

Async function fn(){}) returns the Promise function

  • If fn returns a promise, it returns that promise directly
  • If fn returns something other than a promise, promise.resolve () is called to return a promise

Await is equivalent to the resolve argument in the PROMISE constructor

  • Await can only be used in async, while resolve is used in the promise constructor
  • The value of the awaited right-hand expression (promise or otherwise) will be the final value in the promise.
  • The await operator is a right-to-left operator
    • The resolve function is also called by evaluating the parameter expression
    • Conversely, if the expression on the right side is not evaluated first, then the await expression has no time to fire
  • The difference between await and resolve is that await “moves” all subsequent operations to then because await has the effect of blocking

Expression representation

async function fn(){ code1... ;const value=awaitfn2(); code2... ; }Copy the code

Class is equal to the

new Promise(resolve= >{ code1... ; resolve(fn2()); }).then(value= >{ code2... ; })Copy the code

The example compares whether the prints are the same

  • Example 1(synchronous method) :
function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
Copy the code
function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve= > {
  console.log('promise start')
  const value = syncFun()
  console.log('value=' + value)
  console.log('promise end')})console.log('main end')
Copy the code
  • Example 2(asynchronous method – receive value) :
function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = await syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
Copy the code
function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve= > {
  console.log('promise start')
  resolve(syncFun())
}).then(value= > {
  console.log('value=' + value)
  console.log('promise end')})console.log('main end')
Copy the code
  • Example 3(asynchronous method – accept promise) :
async function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = await syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
Copy the code
async function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve= > {
  console.log('promise start')
  resolve(syncFun())
}).then(value= > {
  console.log('value=' + value)
  console.log('promise end')})console.log('main end')
Copy the code

The latter

Async /await = async/await = async/await = async/await = async/await = async/await = async/await