Preface:

The meaning of brush interview questions is to cover and connect the knowledge points learned before in a question, deepen the impression and improve the ability, rather than recite the answers. Asynchrony, Promise, async/await, event execution mechanism, macro task, micro task… Without further ado, to the point:

Topic:

function getJson() { return new Promise((resolve, reject) => { setTimeout(function() { console.log(2); Resolve (2)}, 2000)})} async function testAsync() {await getJson() // await code below will go to console.log(3); } testAsync()Copy the code

1. What is the output?

The output is as follows: 2 3

In an event loop, the code below await goes to the next event loop

2. What is the principle of async/await?

Async /await is an asynchronous syntax in ES7. We can start by talking about the history of asynchronous programming. Because JavaScript is a single-threaded execution mechanism, we use asynchronous programming for efficiency.

History of asynchronous programming:

1. Callback function:

The disadvantage is that it is not easy to read and maintain the code, the parts are highly coupled, and the process will be messy. Only one callback can be specified per character. Cannot catch exceptions (try catch is executed synchronously, callbacks are queued and errors cannot be caught)

2. Promise

Promises not only avoid callback hell, but also uniformly capture the cause of failure, and are now widely used

3. Generator

A generator is a function that requires an * and can be used to generate iterators. Generator functions are different from normal functions, which can be paused in the middle of a call that always finishes. Unlike normal functions, generators are not called immediately. It returns an iterator for this generator, which is an object that returns a value object each time next is called

4. co

With the rapid development of the front end, the titans felt the need to write asynchronously like synchronous code, and co was born. Co was TJ’s library that combined promises with generators and actually helped us automate iterators

5. async/await

To implement async functions, replace the asterisk (*) of generator functions with async and replace yield with await

Event execution mechanism: EventLoop

  1. Synchronization is performed first
  2. Check whether the stack is empty after execution
  3. If it is empty, check whether any microtasks need to be executed, and if so, put them on the execution stack
  4. Check whether any macro tasks need to be executed and if any are put on the execution stack

What are the macro tasks?

  1. Script (whole code)
  2. setTimeout
  3. setInterval
  4. I/O
  5. UI interaction events
  6. postMessage
  7. MessageChannel
  8. SetImmediate (Node. Js environment)

What are microtasks?

  1. Promise.then
  2. Object.observe
  3. MutaionObserver
  4. Process. NextTick (Node. Js environment)

3. Translate this code into promise

When we understand that async/await is syntactic sugar, its essence is still Promise, async equals promise.then (),await equals operation inside parenthesis. Then (). So this translates to Promise:

// async function testAsync() { // await getJson() // console.log(3); Function testAsync(){return promise.resolve ().then(()=>{return getJson()}).then(()=>{console.log(3); })}Copy the code

References:

1. The past and present of asynchronous programming