5.4.6. Asynchronous Mechanisms

5.4.6.1. async / await

The async function keyword is used to define an asynchronous function in an expression.

5.4.6.2. Promise

A Promise object is a proxy object (proxies a value), and the proxied value may not be known when the Promise object is created. It allows you to bind separate handlers for the success and failure of asynchronous operations. This allows an asynchronous method to return a value like a synchronous method, but instead of returning the final execution result immediately, a promise object that represents a future result

A Promise has the following states:

- pending: The initial state, neither a success nor a failure state.
- fulfilled: means the operation completed successfully.
- rejected: means the operation failed.

A Promise object in the pending state may become fulfilled and pass a value to the corresponding state handler, or it may become rejected and pass a failure message. When any of these situations occur, the handlers bound by the then method of the Promise object will be called (then method contains two parameters: onfulfilled and onrejected, both of which are of type Function. When the state of the Promise is fulfilled , call the onfulfilled method of then, when the Promise state is rejected, call the onrejected method of then, so there is no competition between the completion of the asynchronous operation and the binding processing method).

Since the Promise.prototype.then and Promise.prototype.catch methods return promise objects, they can be chained.

5.4.6.3. Execution queue

The asynchronous operation mechanism in JavaScript is as follows:

• All synchronization tasks are executed on the main thread, forming an execution stack

• In addition to the main thread, there is also a task queue. As soon as the asynchronous task has a running result, an event is placed in the task queue.

• Once all synchronization tasks in the execution stack have been executed, the system reads the task queue to see what events are in it. Those corresponding asynchronous tasks then end the waiting state, enter the execution stack, and start execution.

• The main thread keeps repeating the third step above.

The browser kernel is multi-threaded, and different asynchronous operations in the browser kernel are scheduled and executed by different browser kernel modules, and the asynchronous operations will add relevant callbacks to the task queue. It can be divided into three types: DOM events, time callbacks, and network callbacks:

• DOM events: handled by the DOM module of the browser kernel, when the event is triggered, the callback function will be added to the task queue.

• Time callback: functions such as setTimeout / setInterval will be delayed by the timer module of the browser kernel. When the time arrives, the callback function will be added to the task queue.

• Network callback: Ajax / fetch, etc. are handled by the network module of the browser kernel, and the callback is added to the task queue after the network request is completed and returned.