Utilisation de la promesse JavaScript

La programmation synchrone est généralement facile à déboguer et à maintenir, cependant, la programmation asynchrone offre généralement de meilleures performances et une plus grande flexibilité. La plus grande caractéristique d'Asynchrones est qu'il n'est pas nécessaire d'attendre. Les «promesses» sont progressivement devenues la partie la plus importante de JavaScript, et un grand nombre de nouvelles API ont commencé à mettre en œuvre le principe de promesse. Jetons un coup d'œil à quelle promesse est, et son API et son utilisation!

Promet le statut

L'API XMLHTTPREQUEST est asynchrone, mais elle n'utilise pas l'API Promise. Mais il existe de nombreuses API JavaScript natives qui utilisent la promesse:

* API de batterie

* API Fetch (un remplacement de XHR)

* API travailleur de service

Les promesses ne deviendront plus populaires et courantes à l'avenir, et il est très important que tous les développeurs frontaux l'utilisent. Une autre chose à noter est que Node.js est une plate-forme basée sur les promesses (il est évident que la promesse en est une caractéristique centrale).

L'utilisation des promesses est plus simple que vous ne le pensez - si vous utilisiez Settimeout pour contrôler les tâches asynchrones!

Utilisation de base de la promesse

Le nouveau constructeur Promise () peut être utilisé dans des tâches asynchrones traditionnelles, tout comme l'utilisation précédente de Settimeout et XMLHTTPRequest. Une nouvelle promesse est générée en utilisant le nouveau mot-clé. Dans le même temps, cette promesse fournit des fonctions de résolution et de rejet pour nous permettre d'effectuer des opérations de rappel:

 var p = nouvelle promesse (fonction (résoudre, rejeter) {// faire une tâche de tâche asynchrone asynchrone puis ... if (/ * bon état * /) {résolve ('succès!

Les programmeurs peuvent appeler manuellement la résolution et rejeter les fonctions dans la fonction de rappel en fonction de la situation d'exécution. Voici un exemple plus réaliste qui convertit un appel XMLHttpRequest à une tâche basée sur les promesses:

 // De Jake Archibald's Promises and Back: // http://www.html5rocks.com/en/tutorials/es6/promiss/#toc-promising-xmlhttprequestfunction get (url) {// renvoie une nouvelle promesse. return new promest (function (résolve, rejeter) {// faire le truc xhr habituel var req = new xmlhttprequest (); req.open ('get', url); req.onload = function () {// Ceci est appelé même sur 404 etc // alors vérifiez le statut si (req.status == 200) {// résolve la promesse avec la réponse (req.Satures); } else {// rejeter avec le texte de statut // qui sera, espérons-le, une erreur significative (erreurs req.StatUstExt);}; gens

Promesse.resolve () et promest.reject () peut être appelé directement. Parfois, lorsque nous déterminons que cette promesse n'a pas besoin d'être exécutée, nous n'avons pas besoin d'utiliser de nouvelles pour créer un objet Promise, mais pouvons directement appeler promesse.Resolve () et promest.reject (). Par exemple:

 var userCache = {}; function getUserDetail (nom d'utilisateur) {// Dans les deux cas, en cache ou non, une promesse sera renvoyée if (userCache [username]) {// renvoie une promesse sans le "nouveau" mot-clé return promed.resolve (userCache [username]); } // Utilisez l'API Fetch pour obtenir les informations // fetch renvoie une promesse return fetch ('Users /' + username + '.json') .then (function (result) {userCache [username] = result; return result;}) .catch (function () {throw new error ('n'a pas pu trouver l'utilisateur:' + nom d'utilisateur);});}

Parce que la promesse reviendra certainement, nous pouvons utiliser les méthodes alors et captures pour gérer la valeur de retour!

Puis méthode

Toutes les instances de promesse d'objets ont une méthode alors, qui est utilisée pour interagir avec cette promesse. Tout d'abord, la méthode alors appellera la fonction Resolve () par défaut:

 Nouvelle promesse (fonction (résolve, rejeter) {// une action Async Mock Utilisation de setTimeout setTimeout (function () {Resolve (10);}, 3000);}). puis (fonction (résultat) {console.log (résultat);}); // à partir de la console: // 10

Ensuite, le temps de déclenchement de l'action de rappel est que la promesse est exécutée. Nous pouvons également effectuer des opérations de rappel dans la méthode alors concaténée:

 Nouvelle promesse (fonction (résolution, rejet) {// une action asynchrone simulée à l'aide de setTimeout setTimeout (function () {Resolve (10);}, 3000);}). puis (fonction (num) {console.log ('d'abord alors:', num); return num * 2;}). alors (function (num) {console.log ('' 'Last Then:', ', num); 2; 2; }). puis (fonction (num) {console.log ('Last the

Vous constaterez que chacun puis l'appel prendra la valeur de retour de l'appel précédent, puis en tant que paramètre.

Si une promesse a été exécutée et que le single est alors appelé, l'action de rappel sera à nouveau exécutée. Si la fonction de rappel de rejet est exécutée dans cette promesse et que la méthode est appelée, la fonction de rappel ne sera pas exécutée.

méthode de capture

Catch lorsqu'une promesse est rejetée (rejetée), la méthode de capture sera exécutée:

 Nouvelle promesse (fonction (résolution, rejeter) {// une action Async Mock en utilisant setTimeOut setTimeout (function () {reject ('Done! Fait!'

Habituellement, nous traitons le résultat de l'échec de l'exécution dans la méthode de rejet et exécutons l'exception du résultat dans la capture:

rejeter (erreur («les données n'ont pas pu être trouvées»));

Promesse.Toute méthode

Il y a souvent un scénario lorsque nous appelons de manière asynchrone: nous devons appeler plusieurs opérations asynchrones en même temps, mais nous espérons que nous effectuerons les opérations de réponse uniquement que toutes les opérations seront terminées - c'est le rôle de promesse.tall. La méthode Promise.Toute peut recevoir plusieurs promesses en tant que paramètres, sous la forme d'un tableau, et la fonction de rappel sera appelée après que toutes ces promesses seront exécutées avec succès.

 Promesse.all ([promesse1, promesse2]). Alors (fonction (résultats) {// les deux promesses résolues}). Catch (fonction (erreur) {// Une ou plusieurs promesses ont été rejetées});

Un bon exemple d'utilisation de Promise. tout consiste à effectuer plusieurs opérations AJAX (via Fetch) appels:

 var request1 = fetch ('/ users.json'); var request2 = fetch ('/ articles.json'); promesse.all ([request1, request2]). alors (fonction (résultats) {// les deux promis fait!});

Nous pouvons également effectuer un mélange d'API Fetch et Battery State, car ils renvoient tous les promesses:

 Promesse.all ([fetch ('/ user

Une fois que la fonction de rejet est appelée dans la promesse, l'exécution est rejetée et ne peut pas être terminée normalement, la situation sera un peu compliquée. Une fois la promesse rejetée, la méthode de capture attrapera la première fonction de rejet exécutée:

 var req1 = nouvelle promesse (fonction (résoudre, rejeter) {// une action asynchrone simulée à l'aide de setTimeout setTimeout (function () {Resolve ('First!');}, 4000);}); var req2 = nouvelle promesse (fonction (résolution, rejet) {// une action de mack! 3000);}); promesse.all ([req1, req2]). Alors (fonction (résultats) {console.log ('alors:', un);}). Catch (fonction (err) {console.log ('catch:', err);}); // à partir de la console: // catch: second!

Promise. tout est une interface très importante et jouera un rôle important dans de nombreuses API Promise nouvellement née.

Promesse.race

Promise.race est une fonction intéressante - il n'attend pas que toutes les promesses soient résolues ou rejetées, mais dans toutes les promesses, il tirera tant qu'une exécution se terminera:

 var req1 = nouvelle promesse (fonction (résoudre, rejeter) {// une action asynchrone simulée à l'aide de setTimeout setTimeout (function () {Resolve ('First!');}, 8000);}); var req2 = nouvelle promesse (fonction (résolution, rejet) {// une action de mack! 3000);}); promesse.race ([req1, req2]). Puis (fonction (un) {console.log ('alors:', un);}). Catch (fonction (un, deux) {console.log ('catch:', un);}); // de la console: // alors: second!

Un scénario utile consiste à télécharger des ressources à partir de plusieurs serveurs miroirs. Une fois l'un renvoie, les autres rendements ne sont pas traités.

Apprenez à utiliser les promesses

Promises a été un sujet très chaud au cours des dernières années, et il a même été retiré de JavaScript pour devenir une architecture linguistique. Je crois que nous verrons bientôt des API JavaScript de plus en plus qui utiliseront des modèles basés sur les promesses.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.