Asynchronous programming specification in JavaScript promises/a detailed introduction to _jquery

JavaScript asynchronous programming is gradually accepted by everyone, previously we generally through callback nesting, settimeout, setinterval, etc., the code looks very intuitive, do not look at the entire code logic is difficult to quickly understand. In JavaScript, asynchronous functions may have I/O functions (Ajax, PostMessage, img load, script load, etc.), timer functions (settimeout, setinterval), and so on.

We're all familiar with this, in complex applications are often nested multilayer, even if some of the steps are not completed to cause the program exception, the simplest example: for example, you inject the node into the DOM, you have to wait for the node to inject the operation of this node, when a large number of nodes injected, time is often difficult to grasp. If we get code that relies on Third-party API data. We cannot learn 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 the problem, which is non-blocking and completely decoupled from the code.

So, let me take a look at the asynchronous programming in JavaScript, and first recommend you to look at the relatively popular promises/a specification.

PROMISES/A specification

Note: In order to facilitate the understanding, the description may and the PROMISES/A specification has the discrepancy;

COMMONJS's PROMISES/A specification simplifies asynchronous programming by standardizing API interfaces, making our asynchronous logic code easier to understand.
Follow the implementation of the PROMISES/A specification we call promise objects, promise objects have and only three states: unfulfilled (unfinished), fulfilled (completed), failed (fail/reject) The initial creation is a unfulfilled (unfinished) state, the state can only be changed from unfulfilled (unfinished) to fulfilled (completed), or unfulfilled (unfinished) to failed (failed/rejected). Once the state becomes fulfilled (completed) or failed (failure/rejection), the state can no longer change.

The PROMISES/A specification provides a solution that describes 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 return to the other method, but instead return a promise object to satisfy future listening. Both the fulfilled state and the failed state can be monitored. Promise registers the callback by implementing a then interface to return the Promise object:

Copy Code code as follows:

Then (Fulfilledhandler, ErrorHandler, Progresshandler);

The then interface is used to monitor the different states of a promise. The Fulfilledhandler is used to listen for the fulfilled (completed) state, ErrorHandler to monitor the failed (failure/deny) status, and Progresshandler to listen for unfulfilled (incomplete) status. Promise does not enforce unfulfilled (unfinished) event listening (for example, we know that the old version of jquery (1.5,1.6) deferred is a promise implementation, but does not implement the unfulfilled (incomplete) state of the monitoring back and forth progress Handler).

It is generally believed that the then interface returns a new Promise object, rather than the original promise object, and this new promise object can be understood as a view of the original Promise object, which contains only a set of methods of the original Promise object. These methods can only observe the state of the original promise object and cannot change the intrinsic state of the deferred object. This avoids conflicts between multiple callers, and multiple callers can change the state of the new promise object without affecting the other callers.

In addition, promise provides a transformation of the state of the resolve (implementation state from unfinished to completed) and reject (implementation state from unfinished to rejected or failed) two interface implementations.

Send a picture to help understand:

With promise, you can write asynchronous logic with a synchronized mind. In an asynchronous function, you cannot use Try/catch to catch an exception or throw an exception. With promise, we can explicitly define ErrorHandler, which is equivalent to catching an exception.

Here are a few class libraries that follow the PROMISES/A specification, when,q,rsvp.js,jquery.deferred, and so on.