RPM: Promises and JavaScript asynchronous programming

Ajax applications are truly ubiquitous in an era of user experience today. With the development of browser technology, HTML5, CSS3 and so on, more and more rich Web applications appear, while the Web developers need to deal with more and more asynchronous callback logic in the background while giving us a good experience.

The author of the recent reading of the "async javascript-build more responsive apps with less code" (Javascript asynchronous programming-design of fast-response Web applications) and some of the information, I've sorted out some of the more important points and things that are easy to understand, giving you a deeper understanding of promise objects and asynchronous programming.

Nested callbacks

1. SetTimeout (function () {
2. SetTimeout (function () {
3. Do something
4. }, 10)
5. }, 100);
7. $.ajax (URL, function () {
8. $.ajax (Url2, function () {
9. $.ajax (Url3, function () {
10. Do something
11. });
12. });
13. });

The problem, however, is that the more nested we are, the more deeply the code hierarchy becomes. First, it becomes difficult to read, followed by strong coupling, and the interface becomes poorly expanded. We need a pattern to solve this problem, and that's what promises is going to do.

Asynchronous function type

The asynchronous functions in JavaScript can be divided into two main types:

• I/O functions (Ajax, Script ... ）
• Timing Functions (SetTimeout, setinterval, Setimmediate)

Asynchronous function Exception capture

1. try {
2. SetTimeout (function A () {
3. SetTimeout (function B () {
4. SetTimeout (function C () {
5. throw new error (' Error ');
6. }, 0);
7. }, 0);
8. }, 0);
9. } catch (e) {}

Run the above code, a, B, C is added to the event queue; When the exception is triggered, A, B has been moved out of the event queue, only C in the memory stack, when the exception is not caught by the try, only flow to the application does not catch the exception handler.

Therefore, in an async function, you cannot use Try/catch to catch exceptions.

Distributed events

The event core of JavaScript is the event distribution mechanism, which achieves asynchronous response by binding a subscription handle to the Publisher:

1. Document.onclick = function () {
2. Click
3. }；

PubSub (Publish/subscribe, publish/subscribe) mode is a pattern that achieves multi-tier distribution decoupling by subscribing to the publisher's event response.

The following is a simple version of the pubsub pattern implementation:

2. var PubSub = (function () {
4. var _handlers = {};
6. return {
8. Subscribe to Events
10. On:function (EventType, handler) {
12. if (!_handlers[eventtype]) {
14. _handlers[eventtype] = [];
16. }
18. if (typeof handler = = ' function ') {
20. _handlers[eventtype].push (handler);
22. }
24. },
26. Publish Events
28. Emit:function (EventType) {
30. var args = Array.prototype.slice.call (arguments, 1);
32. var handlers = _handlers[eventtype] | | [];
34. for (var i = 0, len = handlers.length; i < Len; i++) {
36. Handlers[i].apply (null, args)
38. }
40. }
42. };
44. })();

PROMISES/A specification

COMMONJS's PROMISES/A specification was proposed by Kris Zyp in 2009, which simplifies asynchronous programming by standardizing API interfaces, making our asynchronous logic code easier to understand.

Following the implementation of the PROMISES/A specification we call the Promise object, Promise object has only three states: unfulfilled (not completed), fulfilled (completed), failed (failed/rejected) And the state changes can only be from unfulfilled to fulfilled, or unfulfilled to failed;

The Promise object needs to implement a then interface, then(Fulfilledhandler, ErrorHandler, Progresshandler), and then the interface receives a successful callback ( Fulfilledhandler) with a failed callback (ErrorHandler), Progresshandler Trigger callback is optional and the Promise object does not force a callback to this handle.

Then the implementation of the method needs to return a new Promise object to form a chained call, or a promise pipeline.

To achieve a state transition, we also need to implement two additional interfaces:

• Resolve: Implementation status from unfinished to completed
• Reject: implementation state from incomplete to rejected (failed)

In this way, the nested callback we're talking about here can be written like this:

2. This assumes that promise is an implemented promise object
4. function AsyncFn1 () {
6. var p = new Promise ();
8. SetTimeout (function () {
10. Console.log (1);
12. P.resolve (); Mark as Completed
14. }, 2000);
16. return p;
18. }
20. function AsyncFn2 () {
22. var p = new Promise ();
24. SetTimeout (function () {
26. Console.log (2);
28. P.reject (' error '); Mark as rejected
30. }, 1000);
32. return p;
34. }
38. ASYNCFN1 ()
40. . then (function () {
42. return asyncFn2 ();
44. }). Then (function () {
46. Console.log (' done ');
48. }, function (err) {
50. Console.log (ERR);
52. });

With promise, we can write asynchronous logic with a synchronized mind. In the world of synchronization functions, there are 2 very important concepts:

• has a return value
• can throw an exception

Promise is not only a kind of object that can be called by chain, but also provides a more direct correspondence between asynchronous function and synchronous function.

As we said above, in an async function, you cannot use Try/catch to catch an exception, so you cannot throw an exception. With promise, as long as we explicitly define the ErrorHandler, then we can do the same as the synchronous function of the exception capture.

Go: Promises and JavaScript asynchronous programming