Spécifications d'écriture de code de programmation asynchrone JavaScript Promesse notes d'étude_compétences Javascript

Mon travail est devenu un peu plus facile récemment, et je me suis souvenu d'un mot promesse que je voyais toujours auparavant, alors je l'ai patiemment étudié pendant un moment.

1 : Qu'est-ce que la promesse ? Pourquoi y a-t-il cette chose ?

Tout d'abord, Promise a été créé pour résoudre le problème de l'écriture de code en programmation asynchrone javascript.
Avec le développement de JavaScript, les scénarios asynchrones se multiplient. Le front-end a AJAX, setTimeout, etc., et le nœud back-end est plus asynchrone. Selon l'approche traditionnelle, divers rappels sont intégrés dans les rappels. Le code peut prêter à confusion.
À cette époque, la communauté CommonJS proposait une spécification appelée Promise/A, qui définit comment écrire du code asynchrone, notamment en utilisant when/then/resolve, etc. pour organiser le code asynchrone.
Parce que cette spécification est très élégante, de nombreuses personnes l'ont implémentée, notamment Promise() supportée nativement par les navigateurs, différée dans jQuery, when.js, etc.
Puisque ces bibliothèques sont toutes conformes à cette spécification, il suffit d’en apprendre une. J'ai principalement appris le différé de jQuery, donc cet article parle principalement de cette implémentation.

Deux : le différé de jQuery

Tout d'abord, concernant les objets différés, le professeur Ruan Yifeng a écrit un article très détaillé, l'adresse est ici. Il est recommandé de lire d'abord son article, puis de continuer à lire.
Comme mentionné ci-dessus, les promesses sont utilisées pour résoudre des problèmes asynchrones (comme ajax), comparons donc leurs différences.
La méthode d'écriture jQuery AJAX classique est

Copier le code Le code est le suivant :

$.ajax({
Tapez : "obtenir",
URL : "",
Succès : fonction () {},
erreur ; fonction () {}
});

Les paramètres de réussite et d'erreur sont les fonctions de rappel en cas de succès/échec.

Et maintenant, la méthode d'écriture AJAX de jQuery est devenue

Copier le code Le code est le suivant :

$.ajax({
Tapez : "obtenir",
URL : ""
}).done(function () {}).fail(function () {});

Après le succès, la fonction en done sera appelée, et en cas d'échec, la fonction en fail sera appelée.

Quand vous voyez cela, vous vous posez peut-être des questions. Sur quel objet se trouvent les méthodes done/fail ? Quel objet $.ajax() renvoie-t-il et pourquoi existe-t-il ces deux méthodes ?
La réponse réside dans l'objet différé présenté ci-dessous.

jQuery propose un nouveau type Deferred. Généré via $.Deferred(). Par exemple

Copier le code Le code est le suivant :

var def = $.Deferred();

Cette définition hérite de nombreuses méthodes, notamment done/fail/resolve/reject, etc.
Nous savons donc ici également que $.ajax() ci-dessus renvoie réellement cet objet.

Les objets différés ont de nombreuses méthodes. En voici quelques-unes couramment utilisées. Pour plus d'informations, veuillez vous référer à l'API
.
La première chose est de générer naturellement un objet def. Il existe de nombreuses méthodes ici, telles que :

Copier le code Le code est le suivant :

var def = $.Deferred(); // Générez-le vous-même
$.ajax({}); // La méthode ajax renvoie également un objet def
$.when(); // la méthode when renverra également un objet def

Ici, $.when() peut être discuté séparément. Cette méthode reçoit généralement un ou plusieurs objets différés, puis détermine l'état de l'objet renvoyé par $.when() en fonction de l'état de ces objets différés. Un scénario d'utilisation concerne plusieurs requêtes ajax. Si l'une d'entre elles échoue, elles seront toutes considérées comme des échecs. Vous pouvez ensuite transmettre plusieurs méthodes ajax dans $.when(), telles que $.when($.ajax(), $. ajax()). Ensuite, $.when renverra un objet def (jugé en fonction des résultats de ces deux requêtes).

Ensuite après avoir obtenu l'objet def, il existe une série de méthodes pour changer l'état de cet objet

Copier le code Le code est le suivant :

def.resolve(); // Définit l'objet def sur terminé, puis la fonction liée dans def.done() sera exécutée immédiatement.
def.reject(); // Définit l'objet def comme ayant échoué, puis la fonction liée dans def.fail() sera exécutée immédiatement.
def.notify(); // Lorsque l'objet def est exécuté, le rappel correspondant est def.progress().

L'étape suivante consiste à définir la méthode de rappel. L'ordre correspond à ce qui précède, c'est-à-dire quel rappel sera appelé dans quel état

Copier le code Le code est le suivant :

def.done(); // Correspond à def.resolve();
def.fail(); // Correspond à def.reject();
def.progress(); // Correspond à def.notify();
// Spécial
def.always(); // Sera appelé en cas de succès ou d'échec
def.then(); // Accepte plusieurs fonctions, dans l'ordre : succès (terminé), échec (échec) et progression (progrès)

En fait, à ce stade, l'utilisation des objets différés est presque la même. Cependant, jQuery propose également plusieurs API

Copier le code Le code est le suivant :

// Vérifiez la classe d'état actuelle
def.isRejected();
def.isResolved();
def.state();

Comme les noms de ces API le suggèrent, je n'entrerai pas dans les détails. Pour plus de détails, vous pouvez consulter la documentation de l'API jQuery donnée ci-dessus.

Il existe une autre méthode, c'est-à-dire que parfois nous voulons donner un objet def externe, puis cet objet peut définir des rappels pour différents états, mais ne peut pas changer son état, alors nous pouvons utiliser

Copier le code Le code est le suivant :

def.promise();

Renvoie un objet promise, qui est un sous-ensemble de l'objet différé. Vous pouvez utiliser done/fail et d'autres méthodes. Il n'y a pas de résolution/rejet et d'autres méthodes. Il s'agit principalement de protéger l'état de l'objet def. modifié par l'extérieur.

À ce stade, j'ai fini de parler de promesses. Vous pouvez désormais l'utiliser dans vos propres projets. De plus, je vous souhaite à tous une bonne année par avance et vous souhaite à tous une année prospère du Mouton^ ^.