What is asynchrony

Asynchronous in JS simply means not blocking subsequent code execution, such as a setTimeout whose execution sequence must not block subsequent code. Js is a single-threaded language, so eventloop was introduced

eventLoop

The core concept of eventLoop is the execution sequence of microtasks and macro tasks. During js code execution, it is executed in the sequence of synchronous code => microtasks => macro tasks. Common macro tasks include:

  1. setTimeOut
  2. setInterval

Microtasks have (browser support) :

  1. promise.then
  2. async await

Here’s an interview question to help you understand:

foo = async function () {
  console.log('foo');
}
bar = async function () {
  console.log('bar start');
  await (function () {
    console.log('await')
  })()
  console.log('barEnd');
}
console.log('script start');
setTimeout(() = >{
  console.log('setTimeout');
},0)
foo();
bar();
new Promise(resolve= >{
  console.log('Promise');
  resolve(1)
}).then(() = >{
  console.log('PromiseThen');
})
console.log('script end');
Copy the code

The result is:

/* script start
foo
bar start
await
Promise
script end
barEnd
PromiseThen
setTimeout */
Copy the code

Let’s break it down:

  1. This code is executed in sync code => microtask pool => macro task pool order
  2. The synchronization codes are:
    1. Plain print code
    2. In async, before await function (including await function content)
    3. Promise. Before then
  3. Microtasks include:
    1. After the await function
    2. Promise. Then ()
  4. The macro tasks are:
    1. setTimeout

Here are a few things to watch out for:

  1. If there are multiple Script snippets, the second script is executed after the first script microtask is completed, and the macro task pool is executed after the snippet and its own microtask are completed
  2. Assigning the result of an await function to a variable is also put into the microtask queue

promise

Promise specifications and distinctions

What we generally call Promise is the realization of the Promise specification made by ES. The specification of Promise mainly includes Promise /A and Promise /A+. The main differences between the two specifications are:

The processing of 1 progress is ignored

The use of Promise in ES

  1. The state of the Promise

Fullfilled: indicates that the execution is completed and resolve(successful) : indicates that the execution is completed and rejected(failed).

  1. The method of Promise

Then: reslove: reject: reject: finally: No matter what the final promise is, it will be fulfilled

  1. Promise base use example
const promise = new Promise((resolve,reject) = >{
  setTimeout(() = >{
    resolve("result")},10)
})
promise.then(res= >{
  console.log(res)
})
//result
Copy the code
  1. A static method for promise

Promise.all(): it takes an array of Promise instances as an argument, iterates through all the instances, and if they are in fullfilled state, the state is fullfilled, and passes the return values of all instances as an array to its subsequent processing. If any instance is reject, the result of the first REJECT instance is returned for subsequent processing

Promise.any(): Also accepts an array of Promise instances, and returns the result as soon as one instance is fullfilled. Reject becomes reject when all instances are filled

Promise.allsettled (): Will wait until all instances are finished and return an array containing all the results for subsequent processing, regardless of the instance result

Promise.race(): If one of the instances changes state, its state changes and returns the result of this instance

Promise.resolve(): Convert an existing object to a Promise object with state fullfilled

Promise.reject(): Turns an existing object into a Promise object with a reject state

Fulfill a promise

Recommend a well-written article

Async principle

Async /await is the syntactic sugar of Generator, a special function introduced in ES6 for creating iterators