Detailed introduction to asynchronous programming specification Promises/A in Javascript

Asynchronous programming in Javascript is gradually accepted by everyone. Previously, it was generally implemented through callback nesting, setTimeout, setInterval, and other methods. The code looks very inintuitive and difficult to understand without looking at the entire code logic. Asynchronous functions in Javascript include I/O functions (Ajax, postMessage, img load, script load, etc.) and time functions (setTimeout and setInterval.

We are all familiar with this. In complex applications, multiple layers are often nested, and we think that some steps are incomplete, leading to program exceptions. The simplest example is to inject nodes into the DOM, you must wait for the node to be injected before operating on this node. When a large number of nodes are injected, the time is often difficult to grasp. If the Code depends on data from a third-party api. We cannot know the latency of an API response, and other parts of the application may be blocked until it returns results. Promises provides a better solution to this problem, which is non-blocking and completely decoupled from the code.

So, let's look at asynchronous programming in Javascript. First, we recommend that you look at the more popular Promises/A specifications.

Promises/A Specification

Note: For ease of understanding, the description may be different from the Promises/A specification;

The Promises/A specification of CommonJS simplifies asynchronous programming through standardized API interfaces, making our asynchronous logic code easier to understand.
The implementation following the Promises/A specifications is called A Promise object. The Promise object has only three States: unfulfilled (unfinished), fulfilled (completed), and failed (failed/rejected ); the initial state is unfulfilled (unfinished). The state can only be changed from unfulfilled (unfinished) to fulfilled (completed), or unfulfilled (unfinished) to failed (failed/rejected ). Once the status changes to fulfilled (completed) or failed (failed/rejected), the status cannot change.

The Promises/A specification provides A solution for describing the concept of latency (or future) in A program. The main idea is not to execute a method and then block the application waiting for the result to be returned and then call back other methods, but to return a Promise object to meet future listening requirements. Both the fulfilled status and the failed status can be monitored. Promise registers the callback by implementing a then interface to return the Promise object:
Copy codeThe Code is as follows: then (fulfilledHandler, errorHandler, progressHandler );

The then interface is used to listen to different States of a Promise. FulfilledHandler is used to listen to the fulfilled (completed) status, errorHandler is used to listen to the failed (failed/rejected) status, and progressHandler is used to listen to the unfulfilled (unfinished) status. Promise does not forcibly implement unfulfilled (unfinished) event listening (for example, we know that the Deferred of jQuery (1.5, 1.6) of the old version is a Promise implementation, but does not implement unfulfilled (unfinished) status listening back and forth call progressHandler ).

Generally, the then interface returns a new Promise object instead of the original Promise object. This new Promise object can be understood as a view of the original Promise object, it only contains a set of methods of the original Promise object. These methods can only observe the state of the original Promise object, but cannot change the internal state of the deferred object. This avoids conflicts between Multiple callers. Multiple callers can change the state of the Promise object without affecting other callers.

In addition, Promise provides two interfaces, namely resolve (implementation status from incomplete to completed) and reject (implementation status from incomplete to rejected or failed), to change the status.

Send an image to help you understand:

With Promise, you can write asynchronous logic with synchronous thinking. In asynchronous functions, you cannot use try/catch to catch exceptions or throw exceptions. With Promise, we can explicitly define errorHandler, which is equivalent to capturing exceptions.

Below are several class libraries that follow the Promises/A specifications, such as when, q, rsvp. js, and jQuery. Deferred.