Take the $.Deferred object in jQuery as an example to explain how promise objects handle asynchronous issues_jquery

Promises is an abstraction that makes the asynchronous behavior of code more elegant. It is likely to be the next programming paradigm of JavaScript. A Promise represents the result of the task, regardless of whether the task is completed or not.

Some modern browsers already provide native Promise objects, which follow the Promise/A standard. In jQuery1.5, $.Deferred (which can be converted into a promise object) is provided. Many well-known frameworks also provide promise objects. The promise object is already a very important pattern in JavaScript. The elegance it shows in solving asynchronous problems is exactly what JavaScript needs. Let's take the $.Deferred object in jQuery as an example to see how the promise object handles asynchronous issues. Regarding the $.Deferred object, you can check it out on the jQuery official website, so I won’t go into details here.

1. Encapsulating asynchronous operations

First, let’s take loading images as an example and look at the following code:

//加载图片函数
var loadImg = function(url){
　　var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve
　　　　deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
　　　 //失败则触发deferred.reject
  deferred.reject( e );
 } ;
　　//返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){
　　//code
}) ;
//可以注册多个回调，当请求成功时，会按注册的顺序执行，fail和always也有此性质
request.done(function(img){
　　// code
});
//请求失败
request.fail(function(){
　　// code
}) ;
//请求完毕
request.always(function(){
　　//code
});

In the above code, I encapsulate the image loading operations, delegate them to $.Deferred, and finally generate a promise to return. Using this method is cleaner and clearer than using externally exposed callbacks. Another more important reason for doing this is the connection of promises.

2. Promise connection

Let’s take the code for loading the image above as an example to see how to connect promises. Look at the following code:

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
　　//code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){
　　//request执行成功时 连接request1
　　var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request1 ;
},function(e){
　　//request执行失败时 连接request2
　　var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){
　　//code
}) ;

The promise object provides the then method, which accepts two callbacks: onResolve and onReject. By returning promise in the callback, the connection between promises can be completed. In this way, asynchronous operations can be executed serially.

At the same time, jQuery also provides another connection method, see the code:

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
　　//code
}) ;

jQuery provides the $.when function, which can accept n promise objects as parameters. It connects the execution results of promises together. Using this approach, multiple asynchronous operations can be executed in parallel.

3. The End

The code here takes loading images as an example. The same approach can be applied to other asynchronous operations. For example, $.ajax and $.fn.animate in jQuery, calling them returns promise. On the node side, some asynchronous operations (reading databases, reading files, etc.) can also be encapsulated into promises. Then implement the merge operation on multiple promises to execute them serially or in parallel.

Attachment: deferred object

In addition to being used to convert promise objects, deferred itself is also a very useful object. In addition to providing methods and properties like the promise object, it also has the notify function and the progress function. These two functions are of great use when implementing progress bars and waterfall flows.

When implementing the progress bar, the resolve and done functions can be used to define the triggering timing and triggering logic when the progress bar is read to 100%. The notify and progress functions can be used to define the triggering timing and triggering time of the progress bar during reading. Trigger logic. The reject and fail functions can be used to define the trigger timing and trigger logic when progress reading fails.

When implementing waterfall flow, the resolve and done functions can be used to define the triggering timing and triggering logic when all data has been loaded into the page. The notify and progress functions can be used to define the triggering timing and triggering time for waterfall flow to read the next page. Trigger logic.