Asynchronous programming in Javascript is gradually 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 probably 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, multiple layers are often nested, and even some steps are not completed, resulting in program exceptions. The simplest example: For example, if you inject nodes into the DOM, you must wait for the nodes to be injected When operating this node, when a large number of nodes are injected, the time is often difficult to grasp. If our code relies on data from third-party apis. We have no way of knowing the latency of an API response, and other parts of the application may be blocked until it returns a result. Promises offer a better solution to this problem, which is non-blocking and completely decoupled from the code.
So, let me look at asynchronous programming in Javascript, and first of all I recommend that you 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;
The Promises/A specification of CommonJS simplifies asynchronous programming by standardizing the API interface, making our asynchronous logic code easier to understand.
The implementation that follows the Promises/A specification is called the Promise object. The Promise object has one and only three states: unfulfilled (unfulfilled), fulfilled (completed), failed (failed/rejected); when initially created, it is unfulfilled (unfulfilled). Completed) status, the status can only be changed from unsuccessful (incomplete) to fulfilled (completed), or unfulfilled (incomplete) to failed (failed/rejected). Once the status becomes fulfilled (completed) or failed (failed/rejected), the status cannot be changed again.
The Promises/A specification provides a solution for describing the concept of delay (or future) in a program. The main idea is not to execute a method and then block the application to wait for the result to return before calling back other methods, but to return a Promise object to satisfy future monitoring. Both fulfilled and failed states can be monitored. Promises register callbacks by implementing a then interface to return a Promise object:
js code:
then(fulfilledHandler, errorHandler, progressHandler);
The then interface is used to listen to the different states of a Promise. The fulfilledHandler is used to listen to the fulfilled (completed) state, the errorHandler is used to listen to the failed (failed/rejected) state, and the progressHandler is used to listen to the unfulfilled (not completed) state. Promise does not enforce the implementation of unfulfilled (uncompleted) event listeners (for example, we know that the Deferred of the old version of jQuery (1.5, 1.6) is a Promise implementation, but does not implement the unfulfilled (uncompleted) state monitoring to call back progressHandler).
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, which 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. In this way, conflicts between multiple callers can be avoided, and multiple callers can change the state of the new Promise object without affecting other callers.
In addition, Promise provides resolve (implementation status from uncompleted to completed) and reject (implementation status from uncompleted to rejected or failed) two interface implementation status transitions.
Send a picture to help understand:
With Promises, you can write asynchronous logic with synchronous thinking. In an asynchronous function, you cannot use try/catch to catch exceptions, and you cannot throw exceptions. With Promise, we can directly and explicitly define errorHandler, which is equivalent to catching exceptions.
Here are a few libraries that follow the Promises/A specification, when, q, rsvp.js, jQuery.Deferred, and more.
A comparison of the various Promises libraries can be found at: http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/?utm_source=javascriptweekly&utm_medium=email
Article source: http://www.css88.com/archives/4743