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

Need a 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

Need a 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

Need a 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

Need a hint?

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