Tutorials Modern JavaScript (ES6+) for Beginners
Promises — then, catch & finally
Learn Promises — then, catch & finally in our free Modern JavaScript (ES6+) for Beginners series. Step-by-step explanations, examples, and interview tips on Toolliyo Academy.
On this page
Promises — then, catch & finally
A Promise represents work that finishes later (API call, file read, timer). ES6 standardized Promises. Node.js and browsers use them everywhere — async/await (next lesson) is built on top.
Three states
- Pending — still running
- Fulfilled — success,
.then()runs - Rejected — error,
.catch()runs
Creating a Promise
function wait(ms) {
return new Promise((resolve) => {
setTimeout(() => resolve('done'), ms);
});
}
wait(1000).then(msg => console.log(msg));
Chaining API-style flow
fetch('https://api.example.com/courses')
.then(res => {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
})
.then(data => {
console.log('Courses:', data.length);
})
.catch(err => {
console.error('Failed:', err.message);
})
.finally(() => {
console.log('Request finished');
});
🌍 Real-world example — Verify coupon code (simulated)
function validateCoupon(code) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (code === 'LEARN50') resolve({ discount: 50 });
else reject(new Error('Invalid coupon'));
}, 300);
});
}
validateCoupon('LEARN50')
.then(({ discount }) => console.log('Saved', discount + '%'))
.catch(err => console.log(err.message));⚠️ Common Mistake: Forgetting to return inside .then — breaks the chain. Always return the next Promise or value.
💡 Tip: Promise.all([p1, p2]) runs promises in parallel — used when loading dashboard + user profile together.
👨🏫 Teaching note: Draw the Promise state diagram on board before showing async/await — students map await to .then mentally.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Junior
Detailed
Explain JavaScript in the context of Modern JavaScript (ES6+) for Beginners.
Short answer: JavaScript runs single-threaded with an event loop. Closures capture lexical scope; promises/async handle I/O without blocking the UI thread. How to structure your answer (60–90 seconds) Define JavaScript i…
Mid
Detailed
What are common mistakes teams make with Components when using Modern JavaScript (ES6+) for Beginners?
Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. How to structure your answer (60–90 seconds) Define Components in plain language…
Senior
Detailed
How would you debug a production issue related to State in a Modern JavaScript (ES6+) for Beginners application?
Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. How to structure your answer (60–90 seconds) Define State in plain language for…
Mid
Detailed
Compare two approaches to API integration—when would you choose each?
Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. How to structure your answer (60–90 seconds) Define API integration in plain lan…
Junior
Detailed
Describe a real-world scenario where Performance mattered in a Modern JavaScript (ES6+) for Beginners project.
Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. How to structure your answer (60–90 seconds) Define Performance in plain languag…
Questions on this lesson
0
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!