Ce tutoriel couvre les bases des promesses JavaScript, montrant comment vous pouvez les exploiter dans votre développement JavaScript.
Le concept de promesses n'est pas nouveau pour le développement web. Beaucoup d'entre nous ont déjà utilisé des promesses sous la forme de bibliothèques telles que Q, when.js, RSVP.js, etc. Même jQuery a quelque chose appelé Deferred object qui est similaire à une promesse. Mais maintenant nous avons un support natif pour les promesses en JavaScript, ce qui est vraiment excitant.
Vue d'ensemble
Un objet Promise représente une valeur qui n'est pas encore disponible, mais qui sera résolue à un moment donné l'avenir. Il vous permet d'écrire du code asynchrone de manière plus synchrone. Par exemple, si vous utilisez l'API de promesse pour effectuer un appel asynchrone à un service Web distant, vous allez créer un objet Promise qui représente les données qui seront renvoyées par le service Web à l'avenir. La mise en garde est que les données réelles ne sont pas encore disponibles. Il sera disponible lorsque la requête sera terminée et qu'une réponse sera renvoyée par le service Web. Entre-temps, l'objet Promise agit comme un proxy aux données réelles. En outre, vous pouvez attacher des rappels à l'objet Promise qui sera appelé une fois que les données réelles seront disponibles
L'API
Pour commencer, examinons le code suivant, qui crée un nouveau Promesse objet:
const promise = nouvelle Promesse ((resolve, reject) => {
// Le code asynchrone va ici
});
Nous commençons par instancier un nouvel objet Promise et lui transmettons une fonction de rappel. Le rappel prend deux arguments, résoudre et rejeter qui sont les deux fonctions. Tout votre code asynchrone va à l'intérieur de ce rappel. Si tout est réussi, la promesse est réalisée en appelant resolve () . En cas d'erreur, reject () est appelé avec un objet Error . Cela indique que la promesse est rejetée.
Maintenant construisons quelque chose de simple qui montre comment les promesses sont utilisées. Le code suivant envoie une demande asynchrone à un service Web qui renvoie une blague aléatoire au format JSON. Examinons comment les promesses sont utilisées ici:
const promise = new Promise ((résoudre, rejeter) => {
const request = new XMLHttpRequest ();
request.open ('GET', 'https://api.icndb.com/jokes/random');
request.onload = () => {
if (request.status === 200) {
résoudre (request.response); // nous avons des données ici, alors résolvez la promesse
} autre {
reject (Erreur (request.statusText)); // le statut n'est pas 200 OK, donc rejeter
}
}
request.onerror = () => {
reject (Erreur ('Erreur lors de l'extraction des données.')); // erreur survenue, rejeter la promesse
}
demande envoyée(); // envoie la requête
});
console.log ('Demande asynchrone effectuée.');
promise.then ((données) => {
console.log ('Données obtenues! Promesse remplie.');
document.body.textContent = JSON.parse (data) .value.joke;
}, (erreur) => {
console.log ('Promise rejected.');
console.log (error.message);
});
Dans le code précédent, le rappel du constructeur Promise contient le code asynchrone utilisé pour obtenir les données du service distant. Ici, nous créons simplement une requête Ajax à https://api.icndb.com/jokes/random qui renvoie une blague aléatoire. Lorsqu'une réponse JSON est reçue du serveur distant, elle est transmise à resolve () . En cas d'erreur, reject () est appelé avec un objet Error .
Lorsque nous instancions un objet Promise nous obtenons un proxy pour le les données qui seront disponibles dans le futur. Dans notre cas, nous prévoyons que certaines données seront renvoyées à partir du service distant à un moment donné. Alors, comment savons-nous quand les données deviennent disponibles? C'est ici que la fonction Promise.then () est utilisée. Cette fonction prend deux arguments: un rappel de succès et un rappel d'échec. Ces rappels sont appelés lorsque la promesse est réglée (c'est-à-dire soit satisfaite, soit rejetée). Si la promesse a été satisfaite, le rappel de succès sera déclenché avec les données réelles que vous avez transmises à resolve () . Si la promesse a été rejetée, le callback d'échec sera appelé. Tout ce que vous avez passé à reject () sera passé comme argument à ce rappel.
Essayez cet exemple CodePen . Pour afficher une nouvelle blague aléatoire, cliquez sur le bouton RERUN dans le coin inférieur droit de l'intégration. De plus, ouvrez la console de votre navigateur afin de voir l'ordre dans lequel les différentes parties du code sont exécutées
Voir le stylo Un aperçu des promesses JavaScript par SitePoint ( @SitePoint ) sur CodePen .
Notez qu'une promesse peut avoir trois états:
- en attente (non rempli ou rejeté)
- rempli
- rejeté
rejeté La propriété Promise.status qui est inaccessible par code et privée, fournit des informations sur ces états. Une fois qu'une promesse est rejetée ou satisfaite, ce statut lui est associé de façon permanente. Cela signifie qu'une promesse peut réussir ou échouer une seule fois. Si la promesse a déjà été accomplie et plus tard vous lui attachez un then () avec deux callbacks, le callback de succès sera correctement appelé. Donc, dans le monde des promesses, nous ne sommes pas intéressés à savoir quand la promesse est faite. Nous sommes seulement préoccupés par le résultat final de la promesse.
Chaînes de promesses
Il est parfois souhaitable d'enchaîner les promesses ensemble. Par exemple, vous pouvez avoir plusieurs opérations asynchrones à effectuer. Quand une opération vous donne des données, vous allez commencer à faire d'autres opérations sur cette donnée et ainsi de suite. Les promesses peuvent être chaînées ensemble, comme illustré dans l'exemple suivant:
function getPromise (url) {
// renvoie une promesse ici
// envoie une requête asynchrone à l'url dans le cadre de la promesse
// après avoir obtenu le résultat, résoudre la promesse avec
}
const promise = getPromise ('une URL ici');
promise.then ((résultat) => {
// nous avons notre résultat ici
return getPromise (résultat); // Renvoie une promesse ici encore
}). then ((résultat) => {
// gère le résultat final
});
La partie délicate est que, lorsque vous renvoyez une valeur simple dans then () le suivant then () est appelé avec cette valeur de retour. Mais si vous retournez une promesse à l'intérieur de alors () le prochain () l'attend et est appelé quand cette promesse est réglée.
Gérer les erreurs
connaître la then () fonction prend deux callbacks comme arguments. Le second sera appelé si la promesse a été rejetée. Mais nous avons aussi une fonction catch () qui peut être utilisée pour gérer le rejet de promesses. Jetez un oeil sur le code suivant:
promise.then ((résultat) => {
console.log ('Got data!', résultat);
}). catch ((erreur) => {
console.log ('Erreur survenue!', erreur);
});
Ceci est équivalent à:
promise.then ((résultat) => {
console.log ('Got data!', résultat);
}). then (undefined, (error) => {A
console.log ('Erreur survenue!', erroAr);
});
Notez que si la promesse a été rejetée et alors () n'a pas de callback d'échec, le contrôle passera au suivant puis () avec un callback d'échec ou la prochaine capture () . En dehors du rejet explicite de la promesse, catch () est également appelé lorsqu'une exception est levée à partir du rappel du constructeur Promise . Vous pouvez également utiliser catch () à des fins de consignation. Notez que nous pourrions utiliser try ... catch pour gérer les erreurs, mais ce n'est pas nécessaire avec les promesses, car toute erreur asynchrone ou synchrone est toujours détectée par catch () . Conclusion
Ce n'était qu'une brève introduction à la nouvelle API Promises de JavaScript. Clairement, cela nous permet d'écrire du code asynchrone très facilement. Nous pouvons continuer comme d'habitude sans savoir quelle valeur sera renvoyée du code asynchrone à l'avenir. Il y a plus à l'API qui n'a pas été couvert ici. Pour en savoir plus sur Promises, consultez mon article de suivi Une plongée plus profonde dans les promesses JavaScript ainsi que ces excellentes ressources:
Source link