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
Lesson 10 of 12 · Part 4 — Async & Modules · Modern JavaScript (ES6+) for Beginners
Course: Modern JavaScript (ES6+) for Beginners · Lesson: 10/12 · Read time: ~18 min · Level: Beginner · ES version: ES2015 (ES6) and above

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.

Continue learning

Previous: for...of, Sets & Maps Essentials

Next: async/await & Fetch API

Course home: All 12 lessons

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!

Modern JavaScript (ES6+) for Beginners
Course syllabus
Part 1 — Modern Basics
Part 2 — Write Less Code
Part 3 — Data & Collections
Part 4 — Async & Modules
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details