Page
JavaScript Promises: 9 Questions
Learn about promises & take the quiz!
updated over 3 years ago
Do you know your JavaScript & Promises???
- Prove your JavaScript skillz! 🚀
- No login or signup required. ✨
- Multiple choice. 🤖 … How difficult can it be, eh?
Goal
My goal is to try a new ‘quiz tool’ I built for my blog, and get feedback on how well you learned from the excercise.
If you get stuck
- Read the Hints (Green button, lower left corner). Some include a few animated answers w/ detailed annotations, while others offer only a few clues. I can’t give away all the answers so easy!
Seriously though, this is intentional, the answers are there. Skip ahead or try the code snippets out, then change it, and play some more. - Try the code in your browser’s Console (try shortcut
F12or search it) or use repl.it*. - Please feel free to Tweet at me @justsml. I’d love to hear your thoughts!
Loading...
A few more seconds...
Multiple .catch’s
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))What will the output be?
We create a Promise using the constructor method, triggering an error immediately with the reject callback.
Then the .catch handlers work like the DOM’s .addEventListener(event, callback) or Event Emitter’s .on(event, callback) where multiple handler callbacks can be added. Each will be called with the same arguments.
Multiple .catch’s
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))What will the output be?
When using the Promise constructor you must invoke either resolve() or reject() callbacks. The Promise constructor doesn’t use your return value, so the additional Promise created with Promise.reject() will effectively never be heard from again.
With no .catch following the Promise.reject(), the answer is UnhandledPromiseRejectionWarning.
Chaining .then and .catch’s
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'))
})
.catch(error => console.log(error))
.then(error => console.log(error))What will the output be?
When chaining .then’s and .catch’s it is helpful to think of them as a series of steps. Each .then receives the value returned by the previous .then (as its argument.) However, if your “step” encountered an error, any subsequent .then “steps” will be skipped until a .catch
is encountered. If you want to override an error, all you need to do is return a non-error value. It can be accessed via any subsequent .then.
Hint: console.log() always return undefined.
Chaining .catch’s
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'))
})
.catch(error => console.log(error.message))
.catch(error => console.log(error.message))What will the output be?
When chaining .catch’s, each one only handles errors thrown in previous .then or .catch “steps”. In this example the first .catch returns the console.log which could only be accessed via adding a .then() after both the .catch’s.
Multiple .catch’s
new Promise((resolve, reject) => {
resolve('Success!')
})
.then(() => {
throw Error('Oh noes!')
})
.catch(error => {
return "actually, that worked"
})
.catch(error => console.log(error.message))What will the output be?
Hint: .catch’s can be used to ignore (or override) errors simply by returning a regular value.
This trick works only when there is a subsequent .then to receive the value.
Flow between .then’s
Promise.resolve('Success!')
.then(data => {
return data.toUpperCase()
})
.then(data => {
console.log(data)
})What will the output be?
Hint: .then’s pass data sequentially, from return value to the next .then(value => /* handle value */).
A return is key in order to pass a value to the next .then.
Flow between .then’s
Promise.resolve('Success!')
.then(data => {
return data.toUpperCase()
})
.then(data => {
console.log(data)
return data
})
.then(console.log)What will the output be?
There are 2 console.log calls which will be called.
Flow between .then’s
Promise.resolve('Success!')
.then(data => {
data.toUpperCase()
})
.then(data => {
console.log(data)
})What will the output be?
Hint: .then’s pass data sequentially, from return value to the next .then(value => /* handle value */).
A return is key in order to pass a value to the next .then.
Flow between .then’s and .catch’s
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))What will the output be?
