JavaScript Asynchronous Programming Assistant: Promise Mode "Go"

Asynchronous mode is becoming more and more important in web programming, which is not very easy to implement for Web-leading language JavaScript, so many JavaScript libraries (such as jquery and Dojo, AngularJS) Adds an abstraction called promise (the term is called deferred mode). Through these libraries, developers can use the promise pattern in real programming, each promise has a unique interface called then, and when the promise fails or succeeds, it makes callbacks. It represents a result of operations that may be long-running and not necessarily complete. This mode does not block and wait for long operations to complete, but instead returns an object that represents the promised (promised) result.

In this article we will discuss how JavaScript libraries (such as jquery, AngularJS) use promise mode to handle asynchrony, in fact, by providing fault-tolerant support in the form of callbacks.

Let's take a look at how jquery operates:

[JS]View Plaincopy

1. var  $info  = $ (
2. $.ajax ({  
3. "/echo/json/",   
4.      data: { json: json.stringify ({ " Somevalue "})  },  
5.     type: "POST",   
6.     success: function (response)   
7.     {  
8.         $info. Text (response.name);   
9.     }  
10. });  

In this example, you can see that a callback is specified when the setting is successful, which is not a promise, but a good callback method. When the AJAX call is complete, it executes the success function. Depending on the asynchronous operation used by the library, you can use a variety of different callbacks (that is, if the task succeeds, the callback is made, and the response is done). Using promise mode simplifies this process, and asynchronous operations simply return an object call. This promise allows you to invoke a method called then, and then lets you specify the number of function (s) for the callback, let's look at how jquery builds promise: [JS]View Plaincopy

2. var $info = $ ("#info");
4. $.ajax ({
6. URL: "/echo/json/",
8. Data: {
10. Json:JSON.stringify ({
12. "name": "somevalue"
14. })
16. },
18. Type: "POST"
20. })
22. . Then (function (response) {
24. $info. Text (response.name);
26. });

Interestingly, the Ajax object returns the Xhr object to implement promise mode, so we can call the then method, and the advantage is that you can make a chained call that implements the standalone operation as follows:

[JS]View Plaincopy

2. var $info = $ ("#info");
4. $.ajax ({
6. URL: "/echo/json/",
8. Data: {
10. Json:JSON.stringify ({
12. "name": "somevalue"
14. })
16. },
18. Type: "POST"
20. })
22. . Then (function (response) {
24. $info. Text (response.name);
26. })
28. . Then (function () {
30. $info. Append ("...  More ");
32. })
34. . Done (function () {
36. $info. Append ("... finally!");
38. });

Because many libraries are beginning to adopt promise mode, asynchronous operations can become very easy. But what would promise be like if you were to think in the opposite direction? One of the most important patterns is that a function can accept two functions, one is the callback when it succeeds, and the other is the callback when it fails.

[JS]View Plaincopy

2. var $info = $ ("#info");
4. $.ajax ({
6. //change URLs to see error happen
8. URL: "/echo/json/",
10. Data: {
12. Json:JSON.stringify ({
14. "name": "somevalue"
16. })
18. },
20. Type: "POST"
22. })
24. . Then (function (response) {
26. //Success
28. $info. Text (response.name);
30. },
32. function () {
34. //Failure
36. $info. Text ("Bad things happen to good developers");
38. })
40. . Always (function () {
42. $info. Append ("... finally");
44. });

It is important to note that in jquery, whether successful or unsuccessful, we use a tune to specify what we want to invoke. Let's take a look at how Angularjs uses promise mode:

[JS]View Plaincopy

2. var m = angular.module ("myApp", []);
4. M.factory ("DataService", function ($q) {
6. function _callme () {
8. var d = $q. Defer ();
10. SetTimeout (function () {
12. D.resolve ();
14. //defer.reject ();
16. }, 100);
18. return d.promise;
20. }
22. return {
24. CallMe: _callme
26. };
28. });
30. function Myctrl ($scope, DataService) {
32. $scope. Name = "None";
34. $scope. isBusy = true;
36. Dataservice.callme ()
38. . Then (function () {
40. //Successful
42. $scope. Name = "Success";
44. },
46. function () {
48. //Failure
50. $scope. Name = "Failure";
52. })
54. . Then (function () {
56. //Like a Finally Clause
58. $scope. IsBusy = false;
60. });
62. }

You can try these examples in jsfiddle and see what the results will be. Using promise to operate async is a very simple way, and simplifying your code is not a good way to double benefit.

For more information about promise and examples, you can visit our website.

From: JavaScript Promise

This article for CSDN compilation, without permission not reproduced, if necessary reprint please contact market#csdn.net (#换成 @)

JavaScript Asynchronous Programming Assistant: Promise Mode "Go"