Quiz : 9 questions sur les Promises JavaScript
Ne laissez plus jamais tomber une promesse.
Connaissez‑vous les Promesses JavaScript ?
- Prouvez votre maîtrise du JavaScript ! 🚀
- Vérifiez les indices (gros bouton, coin inférieur).
- Essayez le code dans la console de votre navigateur (raccourci
F12ou cherchez‑le) ou utilisez repl.it*. - N’hésitez pas à me tweeter @justsml. J’aimerais connaître votre avis !
👇 Complétez les 9 questions ci‑dessous👇
Quel sera le résultat du code suivant ?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))})p.catch(error => console.log(error.message))p.catch(error => console.log(error.message))Nous créons une Promise avec le constructeur, déclenchant immédiatement une erreur via le callback reject.
Ensuite, les gestionnaires .catch fonctionnent comme .addEventListener(event, callback) du DOM ou .on(event, callback) d’Event Emitter, où plusieurs callbacks de gestionnaire peuvent être ajoutés. Chaque callback sera appelé avec les mêmes arguments.
Quel sera le résultat du code suivant ?
var p = new Promise((resolve, reject) => { return Promise.reject(Error('The Fails!'))})p.catch(error => console.log(error.message))p.catch(error => console.log(error.message))Lors de l’utilisation du constructeur Promise, vous devez appeler l’un des callbacks resolve() ou reject(). Le constructeur Promise ignore la valeur de retour de l’exécuteur, ainsi la Promise supplémentaire créée avec Promise.reject() n’est pas chaînée à p. Les deux gestionnaires sont attachés à p, qui reste en attente, tandis que la promesse rejetée retournée est signalée comme non gérée par l’environnement d’exécution.
Quel sera le résultat du code suivant ?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))}).catch(error => console.log(error)).then(error => console.log(error))Lors du chaînage des .then et des .catch, il est utile de les imaginer comme une série d’étapes. Chaque .then reçoit la valeur renvoyée par le .then précédent (en tant qu’argument). Cependant, si votre « étape » rencontre une erreur, toutes les « étapes » .then suivantes seront sautées jusqu’à ce qu’un .catch soit rencontré. Un gestionnaire catch rétablit la chaîne en revenant normalement : même un objet Error renvoyé devient la valeur d’une promesse accomplie. Lever une exception ou renvoyer une promesse rejetée maintient le rejet. Si une promesse est renvoyée, son état final est adopté.
Quel sera le résultat du code suivant ?
var p = new Promise((resolve, reject) => { reject(Error('The Fails!'))}).catch(error => console.log(error.message)).catch(error => console.log(error.message))Lors du chaînage des .catch’s, chacun ne gère que les erreurs levées dans les étapes précédentes de .then ou de .catch. Dans cet exemple, le premier .catch renvoie le console.log, qui ne peut être récupéré qu’en ajoutant un .then() après les deux .catch’s.
Quel sera le résultat du code suivant ?
new Promise((resolve, reject) => { resolve('Success!') }) .then(() => { throw Error('Oh noes!') }) .catch(error => { return "actually, that worked" }) .catch(error => console.log(error.message))Indice : Les .catch peuvent être utilisés pour ignorer (ou remplacer) les erreurs simplement en renvoyant une valeur ordinaire.
Le premier catch rétablit la chaîne et accomplit sa promesse avec la chaîne renvoyée. Aucun .then ultérieur n’est nécessaire ; le deuxième catch est ignoré puisque la promesse est accomplie. Aucun gestionnaire exécuté n’affiche de valeur.
Quel sera le résultat pour le code suivant ?
Promise.resolve('Success!') .then(data => { return data.toUpperCase() }) .then(data => { console.log(data) })Indice : les .then transmettent les données séquentiellement, du return value au prochain .then(value => /* handle value */).
Un return est essentiel pour passer une valeur au .then suivant.
Quel sera le résultat du code suivant ?
Promise.resolve('Success!') .then(data => { return data.toUpperCase() }) .then(data => { console.log(data) return data }) .then(console.log)Il y a 2 appels à console.log qui seront exécutés.
Quel sera le résultat du code suivant ?
Promise.resolve('Success!') .then(data => { data.toUpperCase() }) .then(data => { console.log(data) })Indice : les .then transmettent les données séquentiellement, du return value au prochain .then(value => /* handle value */).
Un return est essentiel pour passer une valeur au .then suivant.
Quel sera le résultat du code suivant ?
Promise.resolve('Success!') .then(() => { throw Error('Oh noes!') }) .catch(error => { return 'actually, that worked' }) .then(data => { throw Error('The fails!') }) .catch(error => console.log(error.message))Le premier .catch rétablit la chaîne en renvoyant une chaîne de caractères, sans rien afficher. Le .then suivant lève Error('The fails!'), puis le dernier .catch affiche uniquement son message : The fails!.
