1. Prepare

1.1. Function Objects and Instance Objects

  • Function objects: When functions are used as objects, they are simply called function objects
  • Instance object: The object produced by the new function

1.2. Classification of callback functions

  • Sync callbacks:

    • Understand: Execute immediately, finish after complete execution, not put in the callback queue
    • Example: Array traversal related callbacks/Promise’s excutor function

  • Asynchronous callback:

    • Understand: will not be executed immediately, will be placed in the callback queue for future execution
    • Example: the timer callback/ajax callback/Promise success | failure callback

Error in 1.3. JS

  • Type of error

    • Error: The parent type of all errors
    • ReferenceError: The variable referenced does not exist
    • TypeError: An error where the data type is incorrect
    • RangeError: The data value is not in its allowed range
    • SyntaxError: Syntax error

  • Error handling

    • Catch error: try… catch
    • Throw an error

  • Error object

    • Message property: Error related information
    • Stack property: Function call stack record information

2. Understanding and use of Promise

2.1. What is a Promise?

  • Abstract expression:

    • Promise is a new solution for asynchronous programming in JS (who’s the old one?).

  • Specific expressions:

    • Syntactically: Promise is a constructor
    • Functionally, a Promise object is used to encapsulate an asynchronous operation and retrieve its result

  • Promise state changes (only 2, only one change)

    • Pending to resolved
    • Pending a rejected
  • The basic flow of Promise

2.2. Why use Promise?

  • The way you specify the callback function is more flexible: You can specify the callback function after the request has been made or even after the request has ended
  • Support for chained calls to solve the problem of callback hell

2.3. How to use Promise?

  • The main API

    • Promise constructor: Promise (excutor) {}
    • Promise. Prototype. then method: (OnResolved, OnRejected) => {}
    • Promise.prototype.catch method: (OnRejected) => {}
    • Promise. Resolve method: (value) => {}
    • Promise. Reject method: (reason) => {}
    • Promise. All method: (promises) => {}
    • Promise.race method: (promises) => {}

  • Several important questions

    • How do I change the state of a Promise?
    • Will a Promise be called if it specifies multiple success/failure callbacks?
    • What determines the result state of the new Promise returned by Promise.then ()?
    • Who comes first to change the Promise state or to specify the callback function?
    • How does a Promise concatenate multiple action tasks?
    • Promise exception pass through?
    • Interrupt the chain of promise

3. Custom Promise

  • Define the overall structure
  • Implementation of the Promise constructor
  • Promise. Then ()/catch () implementation
  • Promise. Resolve ()/reject () implementation
  • The realization of the Promise. All/race ()
  • Promise. ResolveDelay ()/rejectDelay () implementation
  • ES6 class version

4. The async and await

  • Async function

    • The return value of this function is a Promise object
    • The result of the Promise object is determined by the return value executed by the async function

  • Await the expression

    • The expression to the right of await is normally a Promise object, but it can also be any other value
    • If the expression is a Promise object, await returns the value that the Promise succeeded
    • If the expression is any other value, this value is directly the return value of await

  • Note:

    • “Await” must be written in the async function, but async can be written without “await”
    • If the promise of await fails, an exception will be thrown and a try… Catch to catch the processing

5.JS asynchronous macro queue and microqueue

  • Macro queue: this is used to hold macro tasks (callbacks) to be executed, such as timer callbacks /DOM event callbacks /ajax callbacks
  • Microqueue: Used to hold pending microtasks (callbacks), such as Promise callbacks /MutationObserver callbacks

  • JS execution differentiates between these two queues

    • The JS engine must first execute all the initialization synchronization task code
  • Each time you are ready to fetch the first macro task to execute, pull out all the microtasks and execute them one by one