Prenons l'exemple de l'objet $.Deferred dans jQuery pour expliquer comment les objets de promesse gèrent les problèmes asynchrones_jquery.

Les promesses sont une abstraction qui rend le comportement asynchrone du code plus élégant. Il s'agit probablement du prochain paradigme de programmation de JavaScript. Une promesse représente le résultat de la tâche, que la tâche soit terminée ou non.

Certains navigateurs modernes fournissent déjà des objets Promise natifs, qui suivent le standard Promise/A. Dans jQuery1.5, $.Deferred (qui peut être converti en objet de promesse) est fourni. De nombreux frameworks bien connus fournissent également des objets de promesse. L'objet promise est déjà un modèle très important en JavaScript. L'élégance dont il fait preuve dans la résolution de problèmes asynchrones est exactement ce dont JavaScript a besoin. Prenons l'exemple de l'objet $.Deferred dans jQuery pour voir comment l'objet promise gère les problèmes asynchrones. Concernant l'objet $.Deferred, vous pouvez le consulter sur le site officiel de jQuery, je n'entrerai donc pas dans les détails ici.

1. Encapsulation des opérations asynchrones

Tout d’abord, prenons le chargement d’images comme exemple et regardons le code suivant :

//加载图片函数
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
});

Dans le code ci-dessus, j'encapsule les opérations de chargement d'image, les délègue à $.Deferred, et enfin génère une promesse de retour. L’utilisation de cette méthode est plus propre et plus claire que l’utilisation de rappels exposés en externe. Une autre raison plus importante pour cela est la connexion des promesses.

2. Promettre la connexion

Prenons le code de chargement de l'image ci-dessus comme exemple pour voir comment connecter les promesses. Regardez le code suivant :

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
}) ;

L'objet promise fournit la méthode then, qui accepte deux rappels : onResolve et onReject. En renvoyant la promesse dans le rappel, la connexion entre les promesses peut être complétée. De cette manière, les opérations asynchrones peuvent être exécutées en série.

En parallèle, jQuery propose également une autre méthode de connexion, voir le 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 fournit la fonction $.when, qui peut accepter n objets de promesse comme paramètres. Elle connecte les résultats d'exécution des promesses entre eux. Grâce à cette approche, plusieurs opérations asynchrones peuvent être exécutées en parallèle.

3. La fin

Le code ici prend le chargement d'images comme exemple. La même approche peut être appliquée à d'autres opérations asynchrones. Par exemple, $.ajax et $.fn.animate dans jQuery, les appeler renvoie une promesse. Côté nœuds, certaines opérations asynchrones (lecture de bases de données, lecture de fichiers, etc.) peuvent également être encapsulées dans des promesses. Implémentez ensuite l’opération de fusion sur plusieurs promesses pour les exécuter en série ou en parallèle.

Pièce jointe : objet différé

En plus d'être utilisé pour convertir des objets de promesse, le différé lui-même est également un objet très utile. En plus de fournir des méthodes et des propriétés comme l'objet promise, il dispose également de la fonction de notification et de la fonction de progression. Ces deux fonctions sont d'une grande utilité lors de l'implémentation de barres de progression et de flux en cascade.

Lors de l'implémentation de la barre de progression, les fonctions de résolution et de réalisation peuvent être utilisées pour définir le timing de déclenchement et la logique de déclenchement lorsque la barre de progression est lue à 100%. Les fonctions de notification et de progression peuvent être utilisées pour définir le timing de déclenchement et le déclenchement. temps de la barre de progression pendant la lecture. Les fonctions de rejet et d'échec peuvent être utilisées pour définir le timing de déclenchement et la logique de déclenchement en cas d'échec de la lecture de la progression.

Lors de la mise en œuvre du flux en cascade, les fonctions de résolution et de réalisation peuvent être utilisées pour définir le moment de déclenchement et la logique de déclenchement lorsque toutes les données ont été chargées dans la page. Les fonctions de notification et de progression peuvent être utilisées pour définir le moment de déclenchement et l'heure de déclenchement. pour le débit en cascade, lisez la page suivante. Logique de déclenchement.