Promise error handling in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to catch errors from the promise.

Javascript

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .[1](error => console.error('Error:', error));

Drag options to blanks, or click blank then click option'

Acatch

Bfinally

Cthen

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using .then() instead of .catch() for error handling

Using .finally() to catch errors

The .catch() method is used to handle errors in a promise chain.

2fill in blank

medium

Complete the code to handle errors using async/await with try-catch.

Javascript

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch ([1]) {
    console.error('Error:', error);
  }
}

Drag options to blanks, or click blank then click option'

Aexception

Berr

Ce

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the one used in console.error

Leaving the catch parameter empty

The catch block receives the error object, commonly named 'error' here.

3fill in blank

hard

Fix the error in the promise chain to properly handle errors.

Javascript

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .[1](error => console.log('Error:', error));

Drag options to blanks, or click blank then click option'

Afail

Berror

Ccatch

Dhandle

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like .error or .fail

Trying to handle errors inside .then() without catch

The correct method to handle errors in promises is .catch(), not .error or others.

4fill in blank

hard

Fill both blanks to create a promise that rejects and handle the error.

Javascript

const promise = new Promise((resolve, [1]) => {
  [2]('Failed to load data');
});

promise.catch(error => console.log(error));

Drag options to blanks, or click blank then click option'

Areject

Bresolve

Creject('Failed to load data')

Attempts:

3 left

💡 Hint

Common Mistakes

Using resolve instead of reject to signal failure

Not calling reject inside the promise

The second parameter of the Promise constructor is reject, which is called to reject the promise.

5fill in blank

hard

Fill all three blanks to handle errors and always run cleanup code.

Javascript

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch([1] => console.error('Error:', [2]))
  .[3](() => console.log('Cleanup done'));

Drag options to blanks, or click blank then click option'

Aerror

Cfinally

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for catch parameter and variable

Using .catch() instead of .finally() for cleanup

The catch block uses 'error' as parameter and variable, and finally runs cleanup code.

Practice

1. What is the main purpose of the .catch() method when working with JavaScript Promises?

easy

A. To create a new promise

B. To handle errors or rejected promises

C. To execute code after a promise resolves successfully

D. To cancel a running promise

Solution

1. Step 1: Understand the role of .catch() in Promises

   The .catch() method is designed to handle errors or rejected promises in asynchronous code.

2. Step 2: Differentiate from other methods

   .then() handles successful resolution, while .catch() specifically catches errors.

3. Final Answer:

   To handle errors or rejected promises -> Option B

4. Quick Check:

   .catch() handles errors [OK]

Hint: Remember: .catch() is for errors, .then() is for success [OK]

Common Mistakes:

• Confusing .catch() with .then()
• Thinking .catch() cancels promises
• Believing .catch() creates new promises

2. Which of the following is the correct syntax to catch errors from a promise named myPromise?

easy

A. myPromise.catch(error => console.log(error));

B. myPromise.then(error => console.log(error));

C. myPromise.error(error => console.log(error));

D. myPromise.handleError(error => console.log(error));

Solution

1. Step 1: Identify the correct method for error handling

   The correct method to catch errors from a promise is .catch().

2. Step 2: Check the syntax correctness

   The syntax myPromise.catch(error => console.log(error)); correctly attaches an error handler.

3. Final Answer:

   myPromise.catch(error => console.log(error)); -> Option A

4. Quick Check:

   Use .catch() for errors [OK]

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

Common Mistakes:

• Using .then() to catch errors
• Using non-existent methods like .error()
• Incorrect arrow function syntax

3. What will be the output of the following code?

const p = new Promise((resolve, reject) => {
  reject('Failed');
});

p.then(result => console.log('Success:', result))
 .catch(error => console.log('Error:', error));

medium

A. Success: Failed

B. SyntaxError

C. No output

D. Error: Failed

Solution

1. Step 1: Analyze the promise rejection

   The promise immediately rejects with the message 'Failed'.

2. Step 2: Trace the .then() and .catch() handlers

   The .then() is skipped because the promise is rejected; .catch() runs and logs 'Error: Failed'.

3. Final Answer:

   Error: Failed -> Option D

4. Quick Check:

   Rejected promise triggers .catch() [OK]

Hint: Rejected promises skip .then() and go to .catch() [OK]

Common Mistakes:

• Expecting .then() to run on rejection
• Thinking no output occurs on rejection
• Confusing reject with resolve

4. Identify the error in this code snippet and choose the correct fix:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

// What is wrong here?

medium

A. Should use .error() instead of .catch()

B. Missing return in first .then() to pass parsed JSON

C. No error, code is correct

D. fetch() does not return a promise

Solution

1. Step 1: Review the promise chain syntax

   The code correctly chains .then() to parse JSON and then log data.

2. Step 2: Confirm error handling

   The .catch() properly handles any errors from fetch or JSON parsing.

3. Final Answer:

   No error, code is correct -> Option C

4. Quick Check:

   Proper chaining with .catch() [OK]

Hint: fetch returns promise; .then() chaining is correct [OK]

Common Mistakes:

• Thinking .then() needs explicit return (arrow with braces)
• Using .error() instead of .catch()
• Believing fetch is not promise-based

5. You want to handle errors in a promise chain but also continue processing even if an error occurs. Which pattern correctly achieves this?

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => {
    console.log('Error:', error);
    return {};
  })
  .then(data => console.log('Data:', data));

hard

A. This pattern catches errors and returns a default value to continue processing

B. This pattern stops execution after an error and does not continue

C. Errors are not caught because .catch() is after .then()

D. This pattern causes an infinite loop

Solution

1. Step 1: Understand the error handling flow

   The .catch() catches any errors from the fetch or JSON parsing.

2. Step 2: Analyze the return inside .catch()

   Returning an empty object {} allows the next .then() to receive a value and continue processing.

3. Final Answer:

   This pattern catches errors and returns a default value to continue processing -> Option A

4. Quick Check:

   Return in .catch() continues chain [OK]

Hint: Return a value in .catch() to keep promise chain going [OK]

Common Mistakes:

• Assuming .catch() stops the chain without return
• Not returning a value inside .catch()
• Thinking .catch() after .then() won't catch errors