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é. Si vous voulez écraser une erreur, il suffit de renvoyer une valeur non‑erreur. Celle‑ci pourra être récupérée dans n’importe quel .then suivant.
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))Hint: Les .catch peuvent être utilisés pour ignorer (ou remplacer) les erreurs simplement en renvoyant une valeur ordinaire.
Cette astuce ne fonctionne que s’il y a un .then suivant pour recevoir la valeur.
Quel sera le résultat pour le code suivant ?
Promise.resolve('Success!') .then(data => { return data.toUpperCase() }) .then(data => { console.log(data) })Hint: 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) })Hint: 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))