Then and catch methods in Javascript - Mini Project: Build & Apply

Handling Promises with Then and Catch Methods

📖 Scenario: You are building a simple web app that fetches user data from a server. Sometimes the server responds successfully, and sometimes it fails. You want to handle both cases properly.

🎯 Goal: Learn how to use then and catch methods to handle successful and failed promise results.

📋 What You'll Learn

Create a promise that simulates fetching user data

Create a variable to hold a success message

Use then to handle the success case

Use catch to handle the error case

Print the final message to the console

💡 Why This Matters

🌍 Real World

Handling promises is essential when working with data from servers or APIs that may take time to respond or may fail.

💼 Career

Understanding then and catch methods is important for frontend and backend developers to manage asynchronous operations and errors gracefully.

1

Create a Promise to simulate fetching user data

Create a constant called fetchUserData that is a new Promise. Inside the Promise, use resolve to send the string 'User data loaded'.

Javascript

// Create a constant called fetchUserData that is a new Promise
// Your code here

Hint

Use new Promise((resolve, reject) => { ... }) and call resolve with the success message.

2

Create a variable to hold the success message

Create a variable called message and set it to an empty string ''.

Javascript

const fetchUserData = new Promise((resolve, reject) => {
    resolve('User data loaded');
});

// Create a variable called message and set it to an empty string
// Your code here

Hint

Use let message = ''; to create an empty string variable.

3

Use then and catch methods to handle the Promise

Use fetchUserData.then with a function that sets message to the resolved value. Then use fetchUserData.catch with a function that sets message to 'Error loading user data'.

Javascript

const fetchUserData = new Promise((resolve, reject) => {
    resolve('User data loaded');
});

let message = '';

// Use then to set message to the resolved value
// Use catch to set message to 'Error loading user data'
// Your code here

Hint

Use fetchUserData.then(result => { message = result; }) and fetchUserData.catch(error => { message = 'Error loading user data'; }).

4

Print the final message to the console

Write console.log(message) to print the value of message.

Javascript

const fetchUserData = new Promise((resolve, reject) => {
    resolve('User data loaded');
});

let message = '';

fetchUserData.then(result => {
    message = result;
}).catch(error => {
    message = 'Error loading user data';
});

// Print the message to the console
// Your code here

Hint

Use console.log(message) to show the message. Because promises run asynchronously, use setTimeout to delay the print.

Practice

1. What does the then method do in JavaScript promises?

easy

A. Creates a new promise

B. Runs when the task fails

C. Stops the promise from running

D. Runs when the task finishes successfully

Solution

1. Step 1: Understand the role of then

   The then method is used to handle the result when a promise completes successfully.

2. Step 2: Differentiate from catch

   The catch method handles errors or failures, not success.

3. Final Answer:

   Runs when the task finishes successfully -> Option D

4. Quick Check:

   then = success handler [OK]

Hint: Remember: then = success, catch = failure [OK]

Common Mistakes:

• Confusing then with catch
• Thinking then stops the promise
• Believing then creates a new promise

2. Which of the following is the correct syntax to add a catch handler to a promise named p?

easy

A. catch(p, () => console.log('Error'))

B. p.then.catch(() => console.log('Error'))

C. p.catch(() => console.log('Error'))

D. p.catch = () => console.log('Error')

Solution

1. Step 1: Recall correct catch syntax

   The catch method is called directly on the promise object like p.catch(callback).

2. Step 2: Check each option

   p.catch(() => console.log('Error')) uses correct syntax. p.then.catch(() => console.log('Error')) chains incorrectly. p.catch = () => console.log('Error') tries to assign catch as a property. catch(p, () => console.log('Error')) uses invalid function call.

3. Final Answer:

   p.catch(() => console.log('Error')) -> Option C

4. Quick Check:

   Use promise.catch() syntax [OK]

Hint: Use promise.catch(callback) to handle errors [OK]

Common Mistakes:

• Chaining catch after then incorrectly
• Assigning catch as a property
• Using catch as a standalone function

3. What will be the output of this code?

Promise.resolve('Hello')
  .then(msg => msg + ' World')
  .then(console.log)
  .catch(() => console.log('Error'));

medium

A. Hello

B. Hello World

C. Error

D. undefined

Solution

1. Step 1: Follow promise resolution

   The promise resolves with 'Hello'. The first then adds ' World' to it, resulting in 'Hello World'.

2. Step 2: Output from second then

   The second then logs the result 'Hello World'. The catch is not called because no error occurs.

3. Final Answer:

   Hello World -> Option B

4. Quick Check:

   Promise resolves + then chains = 'Hello World' [OK]

Hint: then chains transform and pass values forward [OK]

Common Mistakes:

• Expecting catch to run without error
• Ignoring value returned by first then
• Thinking console.log returns undefined

4. Identify the error in this code snippet:

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

fetch('url')
  .then(response => response.json())
  .catch(error => console.log('Error:', error))
  .then(data => console.log(data));

medium

A. The second chain logs data even if fetch fails

B. The first chain has wrong catch placement

C. Both chains are correct

D. fetch cannot be chained with then and catch

Solution

1. Step 1: Analyze first chain

   The first chain calls then twice and catch last, so errors are caught properly.

2. Step 2: Analyze second chain

   The second chain calls catch before the last then. So even if fetch fails, the last then runs with undefined data, causing possible issues.

3. Final Answer:

   The second chain logs data even if fetch fails -> Option A

4. Quick Check:

   Catch before then can cause unexpected data [OK]

Hint: Place catch last to handle errors before then [OK]

Common Mistakes:

• Placing catch before then incorrectly
• Assuming catch stops later then calls
• Ignoring promise chain order

5. You want to fetch user data and then fetch their posts only if the user fetch succeeds. Which code correctly uses then and catch to do this?

hard

A. fetchUser()
.then(user => fetchPosts(user.id))
.then(posts => console.log(posts))
.catch(err => console.log('Error:', err));

B. fetchUser()
.catch(err => console.log('Error:', err))
.then(user => fetchPosts(user.id))
.then(posts => console.log(posts));

C. fetchUser()
.then(user => fetchPosts(user.id))
.catch(err => console.log('Error:', err))
.then(posts => console.log(posts));

D. fetchUser()
.then(user => fetchPosts(user.id))
.catch(err => console.log('Error:', err))
.catch(err => console.log('Another error:', err));

Solution

1. Step 1: Understand chaining for dependent tasks

   We want to fetch posts only if user fetch succeeds, so fetchPosts must be inside the first then.

2. Step 2: Place catch at the end

   Catch should be last to handle any error from either fetchUser or fetchPosts.

3. Final Answer:

   fetchUser().then(user => fetchPosts(user.id)).then(posts => console.log(posts)).catch(err => console.log('Error:', err)); -> Option A

4. Quick Check:

   Chain then for success, catch last for errors [OK]

Hint: Chain dependent tasks in then, catch errors last [OK]

Common Mistakes:

• Placing catch before all then calls
• Calling then after catch causing unexpected runs
• Using multiple catch handlers unnecessarily