In jquery $. Deferred object is an example of how the Promise object handles asynchronous problems _jquery

Promises is an abstraction that makes code asynchronous behavior more elegant, and it is likely to be the next programming paradigm for JavaScript, a promise that represents the outcome of a task, regardless of whether the task is completed or not.

Native promise objects have been provided in some modern browsers, and they follow the promise/a+ standard. In jquery1.5+, the $ was provided. Deferred (which can be converted to promise objects). In many well-known frameworks, promise objects are also provided. The Promise object is already a very important pattern in JavaScript, and it shows elegance in solving asynchronous problems that JavaScript needs. The following is $ in jquery. Deferred Object For example, take a look at how the Promise object handles asynchronous problems. About $. Deferred objects, you can go to the jquery website to view, here is not to repeat.

Encapsulation of asynchronous operations

First, let's take an example of loading a picture and look at the following code:

Load picture functions
var loadimg = function (URL) {
var img = new Image (), deferred = $. Deferred ();
 img.src = URL;
 Img.onload = function () {
  ///success triggers Deferred.resolve
deferred.resolve (this);
 Img.onerror = function (e) {
//failure triggers Deferred.reject
  deferred.reject (e);
Returns the Promise object return
 deferred.promise ();
Request Picture
var request = loadimg (' http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6 ');
Request succeeded
Request.done (function (img) {
//code
});
Multiple callbacks can be registered and, when the request succeeds, executed in the order of registration, fail and always also have this property
request.done (Function (img) {
/code
});
Request failed
Request.fail (function () {
//code
});
Request completed
Request.always (function () {
//code
});

Above the code, I encapsulate the picture loading operations and delegate them to $. Deferred, and finally generates a promise return. In this way, it is cleaner and clearer than the way the callback is exposed externally. Another more important reason for doing so is the connection of the promise.

Second, the Promise connection

Let's take a look at how to do a promise connection and look at the following code as an example of the code loaded in the image above:

var request = loadimg (' yun_qi_img/89613257775992_800x800.jpg ');
Request.done (Function (img) {
//code
});
Promise
var request3 = request.then (Function (img) {
//request connection when execution succeeds when request is connected to another promise Request1
var request1 = loadimg (' yun_qi_img/29492535741725_800x800.jpg ');
return Request1
},function (e) {
//request connection request2
var request2 = loadimg When execution fails (' yun_qi_img/　　29492535741725_800x800.jpg ');
return request2;
});
Request execution and Request1 or request2 successful execution
request3.done (function (done) {
//code
});

The Promise object provides a then method that accepts two callbacks: Onresolve and Onreject, and returns promise in the callback to complete the connection between the promise. In this way, the asynchronous operation can be executed serially.

At the same time, jquery provides another way to connect, looking at code:

var request = loadimg (' yun_qi_img/48188827139381_800x800.jpg ');
var request1 = loadimg (' yun_qi_img/50258594673502_800x800.jpg ');
Via $.when connection Promise
var request2 = $.when (request,request1);
Request2.done (function (img,img) {
//code
});

jquery provides the $.when function, which accepts n promise objects as arguments, and it connects the results of promise execution. With this approach, multiple asynchronous operations can be executed in parallel.

Third, the end

The code here is an example of loading a picture, and the same approach can be applied to other asynchronous operations. For example, in jquery $.ajax, $.fn.animate, call them back is promise. At the node side, you can also encapsulate some asynchronous operations (read databases, read files, etc.) into promise. The merged operations are then implemented on multiple promise, which are executed serially or in parallel.

Attachment: Deferred Object

Deferred is a useful object in addition to the transformation of promise objects. In addition to providing those methods and properties like promise objects, there are notify functions and progress functions that are useful when implementing progress bars and waterfall flows.

When implementing the progress bar, the resolve and the done functions can be used to define the trigger timing and triggering logic when the progress bar reads to 100%, and the Notify and progress functions can be used to define the trigger timing and triggering logic of the progress bar in the reading. The Reject and fail functions can be used to define trigger timing and triggering logic when progress reading fails.

   when implementing waterfall flows, the resolve and the done functions can be used to define the trigger time and trigger logic when the data has been loaded into the page, and the Notify and progress functions can be used to define the trigger timing and triggering of the waterfall stream reading the next page.