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.