Modèle de programmation asynchrone Javascript Mode promesse introduction détaillée_compétences javascript

Le mode de programmation Promesse est également appelé thenable, ce qui peut être compris comme une exécution différée. Chaque promesse possède une interface unique appelée then, qui rappelle lorsque la promesse échoue ou réussit. Il représente le résultat d’une opération qui peut être de longue durée et qui ne doit pas nécessairement être achevée. Au lieu de bloquer et d'attendre la fin d'une longue opération, ce modèle renvoie un objet qui représente le résultat promis.

De nombreuses bibliothèques JavaScript actuelles (telles que jQuery et Dojo, AngularJS) ajoutent cette abstraction appelée Promise. Grâce à ces bibliothèques, les développeurs peuvent utiliser le modèle Promise dans la programmation du monde réel.

Ci-dessous, nous utiliserons jQuery comme exemple pour expliquer comment la bibliothèque JavaScript utilise le mode Promise pour gérer le traitement asynchrone. En fait, elle fournit une prise en charge de la tolérance aux pannes via des rappels. Exécutez le rappel correspondant lorsqu'une opération réussit ou échoue, ou dans toutes les circonstances, et essayez de gérer toutes les situations qui peuvent se produire dans un certain élément de logique.

Jetons d’abord un coup d’œil au fonctionnement général de jQuery :

Copier le code Le code est le suivant :

var $info = $("#info ");
$.ajax({
url:"/echo/json/",
data: { json: JSON.stringify({"name": "someValue"}) },
tapez : "POST",
succès : function(response)
{
$info.text(response.name);
}
});

Dans cet exemple, vous pouvez voir qu'un rappel sera spécifié lorsque le paramètre est réussi, ce qui est une bonne méthode de rappel. Ce n'est pas une promesse, et la documentation officielle de jQuery ne recommande plus cette méthode (http:// api). .jquery.com/jQuery.ajax/#jqXHR). Une fois l'appel Ajax terminé, il exécute la fonction de réussite. En fonction des opérations asynchrones utilisées par la bibliothèque, vous pouvez utiliser différents rappels (c'est-à-dire que la tâche réussisse ou non, un rappel sera effectué pour répondre). L'utilisation du modèle Promise simplifiera ce processus et l'opération asynchrone n'aura besoin que de renvoyer un appel d'objet. Cette promesse vous permet d'appeler une méthode appelée ensuite, qui vous permet ensuite de spécifier le nombre de fonctions de rappel.

Regardons comment jQuery crée une promesse :

Copiez le code Le code est le suivant :

var $info = $("#info");
$.ajax({
url : "/echo/json/",
données : {
json : JSON. stringify({
"name": "someValue"
})
},
tapez : "POST"
})
.then(function (response) {
$info.text(response.name);
});

L'objet ajax jQuery implémente le mode Promise en renvoyant l'objet xhr, nous pouvons donc appeler la méthode then. L'avantage est que vous pouvez enchaîner les appels pour réaliser des opérations indépendantes, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

var $info = $("#info ");
$.ajax({
url : "/echo/json/",
data : {
json : JSON.stringify({
"name": "someValue"
})
},
tapez : "POST"
})
.then(function (response) {
$info.text(response.name);
})
.then(function () {
$info.append("...Plus");
})
.done(function () {
$info.append ("". ..enfin !");
});

Étant donné que de nombreuses bibliothèques commencent à adopter le modèle Promise, les opérations asynchrones deviendront très simples. Mais si vous y réfléchissez du point de vue opposé, à quoi ressemblerait Promise ? Un modèle très important est qu'une fonction peut accepter deux fonctions, un rappel en cas de succès et un rappel en cas d'échec.

Copier le code Le code est le suivant :

var $info = $("#info");

$.ajax({
// Changer l'URL pour voir l'erreur se produire
url : "/echo/json/",
data : {
json : JSON.stringify({
"name": "someValue"
})
},
tapez: "POST"
})
.then(function (response) {
// success
$info.text(response.name);
},
function () {
// échec
$info.text("de mauvaises choses arrivent aux bons développeurs");
})
.always(function () {
$info.append("...finalement");
});

Il est à noter que dans jQuery, quel que soit le succès ou l'échec, nous utiliserons un appel pour spécifier ce que nous voulons appeler.
En fait, vous pouvez aussi l'écrire comme ceci, qui est également la méthode recommandée dans la documentation officielle de jQuery :

Copier le code Le code est le suivant :

var $info = $("#info ");

$.ajax({
// Changer l'URL pour voir l'erreur se produire
url : "/echo/json/",
data : {
json : JSON.stringify({
"name": "someValue"
})
},
tapez: "POST"
})
.done(function (response) {
// succès
$info.text(response.name);
}).fail(function () {
// échec
$info.text("de mauvaises choses arrivent aux bons développeurs");
})
.always(function () {
$info.append("...finalement");
});

Voyons comment AngularJS utilise le modèle Promise :

Copier le code Le code est le suivant :

var m = angulaire.module("myApp ", [ ]);

m.factory("dataService", function ($q) {
function _callMe() {
var d = $q.defer();
setTimeout(function () {
d.resolve();
             //defer.reject();
        }, 100 ); 🎜 > };
});

function myCtrl($scope, dataService) {
$scope.name = "Aucun";
$scope.isBusy = true;
dataService.callMe()

.then(function ( ) {

                                                                                                                                                               
})
.then(function () {
              // Comme une clause Final
            $scope.isBusy = false ;
       });
}



Vous pouvez essayer ces exemples dans JSFiddle et voir ce qui se passe. Utiliser Promise pour fonctionner de manière asynchrone est un moyen très simple, et cela peut également simplifier votre code. C'est en effet un bon moyen de faire d'une pierre deux coups.
Pour plus d'introduction et d'exemples de Promise, vous pouvez vous rendre sur le site officiel (http://www.promisejs.org/).