Asynchronous programming in Javascript has gradually been accepted by everyone. Previously, people usually implemented it through callback nesting, setTimeout, setInterval, etc. The code looks very unintuitive, and it is difficult to quickly understand without looking at the entire code logic. Asynchronous functions in Javascript include I/O functions (Ajax, postMessage, img load, script load, etc.), timing functions (setTimeout, setInterval), etc.
We are all familiar with these. In complex applications, there are often multiple layers of nesting, and even thinking that some steps have not been completed and the program exceptions are caused. The simplest example is: For example, if you inject a node into the DOM, you must wait for the node to be injected and operate the node. When a large number of nodes are injected, it is often difficult to grasp the time. If we have the code to rely on the data of third-party APIs. We cannot learn how latency a API response is, and other parts of the application may be blocked until it returns the result. Promises provides a better solution to this problem, it is non-blocking and is completely decoupled from the code.
So, let me take a look at asynchronous programming in Javascript. First of all, I recommend you to take a look at the relatively popular Promises/A specification.
Promises/A specification
Note: For ease of understanding, the description may differ from the Promises/A specification;
CommonJS's Promises/A specification simplifies asynchronous programming by standardizing API interfaces, making our asynchronous logic code easier to understand.
We call the implementation of the Promises/A specification. The Promise object has only three states: unfulfilled, fulfilled, and failed; it was initially created with an unfulfilled state, and the state can only change from unfulfilled to fulfilled, or unfulfilled to failed (failed/rejected). Once the state becomes fulfilled (completed) or failed (failed/rejected), the state cannot change any more.
The Promises/A specification provides a solution to describe the concept of delay (or future) in a program. The main idea is not to execute a method and then block the application and wait for the result to return before calling back other methods, but to return a Promise object to satisfy future listening. Both the fulfilled state and the failed state can be listened to. Promise registers callbacks by implementing an then interface to return the Promise object:
The code copy is as follows: then(fulfilledHandler, errorHandler, progressHandler);
Then interface is used to listen for different states of a promise. The fulfilledHandler is used to listen for the fulfilled state, the errorHandler is used to listen for the failed state, and the progressHandler is used to listen for the unfulfilled state. Promise does not force unfulfilled event listening (for example, we know that the old version of jQuery (1.5, 1.6) Deferred is an implementation of Promise, but does not implement the unfulfilled state listening back and forth.
It is generally believed that the then interface returns a new Promise object, not the original Promise object. This new 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 status of the original Promise object, but cannot change the internal state of the deferred object. This can avoid conflicts between multiple callers, which can change the state of the new Promise object without affecting other callers.
In addition, Promise provides two interfaces that implement state transitions from resolve (implementation state from unfinished to completed) and reject (implementation state from unfinished to reject or failed).
Send a picture to help understand:
With Promise, you can write asynchronous logic with a synchronous mindset. In asynchronous functions, you cannot use try/catch to catch exceptions, and you cannot throw exceptions. With Promise, we can directly explicitly define an errorHandler, which is equivalent to catching exceptions.
The following are several class libraries that follow the Promises/A specifications, when, q, rsvp.js, jQuery.Deferred, etc.