Mon travail a été un peu plus facile récemment. Je me suis souvenu d'une promesse de mots que j'ai toujours vue auparavant, alors je suis descendu pour l'étudier patiemment.
1: Qu'est-ce qu'une promesse? Pourquoi cette chose est-elle là?
Tout d'abord, la promesse est créée pour résoudre le problème de l'écriture de code lors de la programmation asynchrone de JavaScript.
Avec le développement de JavaScript, il y a de plus en plus de scénarios asynchrones. Le frontal a Ajax, Settimeout, etc., et le nœud backend est asynchrone. Selon la pratique traditionnelle, il s'agit d'intégrer des rappels dans divers rappels. Le code peut rendre les gens étourdis.
À l'heure actuelle, la communauté CommonJS a proposé une spécification appelée promesse / a +, qui définit comment écrire du code asynchrone, y compris en utilisant when / puis / résolution, etc. pour organiser le code asynchrone.
Parce que cette spécification est très élégante, de nombreuses personnes ont mis en œuvre cette spécification les unes après les autres, y compris la promesse de soutien native du navigateur (), différée en jQuery, When.js, etc.
Parce que ces bibliothèques répondent à cette spécification, apprenez-en une. J'ai principalement appris différé de jQuery, donc cet article parle principalement de cette implémentation.
Deux: JQuery est différé
Tout d'abord, à propos de l'objet différé, M. Ruan Yifeng a écrit un article en détail, veuillez cliquer ici. Il est recommandé de lire son article en premier, puis de continuer à lire.
Comme mentionné ci-dessus, les promesses sont conçues pour résoudre les asynchrones (comme l'Ajax), alors comparons leurs différences.
Le classique jQuery Ajax est écrit comme
La copie de code est la suivante:
$ .ajax ({
Type: "Get",
URL: "",
Success: function () {},
erreur; fonction () {}
});
Les paramètres de réussite et d'erreur sont les fonctions de rappel lors du succès / de l'échec.
Maintenant, la méthode d'écriture de JQuery est devenue
La copie de code est la suivante:
$ .ajax ({
taper; "obtenir",
URL: ""
}). Done (function () {}). fail (function () {});
Après le succès, la fonction dans terminée sera appelée, et si la fonction en échec est appelée, la fonction en échec sera appelée.
Après avoir vu cela, vous pouvez avoir des questions, quel objet ces méthodes sont-elles faites / échouent? Quel objet $ .ajax () revient-il et pourquoi y a-t-il ces deux méthodes?
La réponse est dans l'objet différé introduit ci-dessous.
JQuery fournit un nouveau type de différé. Générer avec $ .deferred (). Par exemple
La copie de code est la suivante:
var def = $ .deferred ();
Ce Def hérite de nombreuses méthodes, notamment la réalisation / échouer / résoudre / rejeter, etc.
Nous savons donc ici que le $ ci-dessus $ .ajax () renvoie réellement cet objet.
Il existe de nombreuses méthodes pour les objets différés. Voici plusieurs couramment utilisés. Pour plus d'informations, veuillez consulter l'API.
La première chose est de générer naturellement un objet DEF. Il existe de nombreuses façons ici, comme:
La copie de code est la suivante:
var def = $ .deferred (); // Générez-le vous-même
$ .ajax ({}); // La méthode Ajax renvoie également un objet DEF
$ .When (); // Quand la méthode 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. L'un des scénarios d'utilisation est plusieurs demandes AJAX. Si l'un d'eux échoue, il est considéré comme un échec. Ensuite, vous pouvez transmettre plusieurs méthodes AJAX dans $ .When (), telles que $ .when ($. Ajax (), $ .ajax ()). Alors $. Où renvoie un objet DEF (jugé en fonction des résultats de ces deux demandes).
Ensuite, vous obtenez l'objet DEF, et il existe une série de méthodes pour modifier l'état de cet objet.
La copie de code est la suivante:
Def.Resolve (); // Définissez l'objet Def à remplir, puis la fonction liée à Def.Done () sera exécutée immédiatement.
def.reject (); // Définissez l'objet DEF à l'échec, puis la fonction liée à Def.fail () sera exécutée immédiatement.
def.Notify (); // Pendant l'exécution de l'objet DEF, le rappel correspondant est def.progress ().
Ensuite, la méthode de définition du rappel, la commande correspond à ce qui précède, c'est-à-dire ce que l'état appellera à quel rappel
La copie de code est la suivante:
def.done (); // correspondant à Def.Resolve ();
def.fail (); // correspondant à def.reject ();
def.progress (); // correspondant à def.notify ();
// Spécial
Def.always (); // appelé en cas de succès ou d'échec
Def.Enhen (); // Accepter plusieurs fonctions, dans l'ordre, le succès, l'échec et les progrès
En fait, à ce stade, l'utilisation de l'objet différé est presque la même. Cependant, JQuery fournit également plusieurs API
La copie de code est la suivante:
// Vérifiez la classe d'état actuelle
Def.IsRejectEd ();
Def.isResolved ();
Def.State ();
Comme son nom l'indique, ces API ne seront pas discutées en détail. Pour plus de détails, vous pouvez consulter la documentation de l'API JQuery indiqué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 divers états, mais nous ne pouvons pas modifier son état, nous pouvons donc l'utiliser.
La copie de code est la suivante:
Def.Promis ();
Renvoie un objet promis, qui est un sous-ensemble de l'objet différé. Vous pouvez utiliser des méthodes terminées / échecs et d'autres méthodes, sans résolution / rejet et autres méthodes. Il s'agit principalement de protéger l'état de l'objet DEF de la modification de l'extérieur.
À ce stade, toutes les promesses ont été discutées. Vous pouvez désormais les utiliser dans vos projets. De plus, je vous souhaite une bonne petite année à l'avance. Je vous souhaite à tous une bonne année des moutons ^^.