Then and catch methods in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to handle the promise resolution using the then method.

Javascript

fetch('https://api.example.com/data')
  .[1](response => response.json())

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

Afinally

Bcatch

Cthen

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then to handle success.

Using finally which runs regardless of success or failure.

The then method is used to handle the successful resolution of a promise.

2fill in blank

medium

Complete the code to handle errors from the promise using the catch method.

Javascript

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

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

Acatch

Bresolve

Cfinally

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch to handle errors.

Using finally which runs regardless of error or success.

The catch method is used to handle errors or rejections from a promise.

3fill in blank

hard

Fix the error in the code to properly handle both success and failure of the promise.

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'

Acatch

Bthen

Cfinally

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch for error handling.

Using a non-existent method like error.

The catch method should be used to handle errors after then chains.

4fill in blank

hard

Fill both blanks to create a promise chain that logs data on success and logs error on failure.

Javascript

fetch('https://api.example.com/data')
  .[1](response => response.json())
  .[2](error => console.error(error))

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

Athen

Bcatch

Cfinally

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping then and catch methods.

Using finally instead of catch for errors.

then handles success, catch handles errors in promise chains.

5fill in blank

hard

Fill all three blanks to handle success, error, and finally actions in a promise chain.

Javascript

fetch('https://api.example.com/data')
  .[1](response => response.json())
  .[2](error => console.error(error))
  .[3](() => console.log('Done'))

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

Athen

Bcatch

Cfinally

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch before then.

Using resolve which is not a method on promises.

Omitting finally when needed.

then handles success, catch handles errors, finally runs always after promise settles.

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