Error handling with async and await in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to catch errors using try-catch.

Javascript

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

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

Aerr

Bexception

Cerror

De

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name in catch that is not used inside the block.

Leaving the catch parentheses empty.

The catch block receives the error object, commonly named error. This name is used inside the block to access the error details.

2fill in blank

medium

Complete the code to throw a custom error inside an async function.

Javascript

async function checkNumber(num) {
  if (num < 0) {
    [1] new Error('Negative number not allowed');
  }
  return 'Number is valid';
}

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

Athrow

Breturn

Cconsole.log

Dawait

Attempts:

3 left

💡 Hint

Common Mistakes

Using return instead of throw to signal errors.

Trying to await the error.

To signal an error, use throw followed by an Error object. This stops the function and passes the error to the caller.

3fill in blank

hard

Fix the error in the async function to properly handle errors with try-catch.

Javascript

async function getUser() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) {
      [1] new Error('Failed to fetch user');
    }
    const user = await response.json();
    return user;
  } catch (error) {
    console.error(error);
  }
}

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

Aawait

Breturn

Cconsole.error

Dthrow

Attempts:

3 left

💡 Hint

Common Mistakes

Using return instead of throw inside the if statement.

Logging the error instead of throwing it.

When the response is not OK, you must throw an error to jump to the catch block. Using return or other statements won't trigger error handling.

4fill in blank

hard

Fill both blanks to create an async function that returns data or throws an error if fetch fails.

Javascript

async function loadData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.[1]) {
    [2] new Error('Network response was not ok');
  }
  return response.json();
}

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

Aok

Bstatus

Cthrow

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Checking response.status instead of response.ok.

Using return instead of throw to signal error.

The response.ok property tells if the fetch was successful. If not, you throw an error to stop execution and handle it later.

5fill in blank

hard

Fill all three blanks to handle errors when calling an async function with try-catch.

Javascript

async function main() {
  try {
    const data = await [1]();
    console.log('Data:', [2]);
  } catch ([3]) {
    console.error('Error caught:', [3]);
  }
}

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

AloadData

Bdata

Cerror

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong function name in the await call.

Not matching the catch variable name with the one used inside the block.

You call the async function fetchData, store the result in data, and catch errors with the variable error.

Practice

1. What is the main purpose of using try...catch with async and await in JavaScript?

easy

A. To handle errors that occur during asynchronous operations

B. To make the code run faster

C. To convert asynchronous code into synchronous code

D. To declare variables inside async functions

Solution

1. Step 1: Understand async/await behavior

   Async functions return promises, and await pauses execution until the promise settles.

2. Step 2: Role of try...catch with async/await

   Errors in awaited promises can be caught using try...catch to prevent program crashes.

3. Final Answer:

   To handle errors that occur during asynchronous operations -> Option A

4. Quick Check:

   Error handling = To handle errors that occur during asynchronous operations [OK]

Hint: Use try...catch around await to catch async errors [OK]

Common Mistakes:

• Thinking async/await makes code synchronous
• Ignoring errors from awaited promises
• Using try...catch without async functions

2. Which of the following is the correct syntax to catch errors from an async function using await?

easy

A. try await asyncFunc() catch error { console.log(error); }

B. await try { asyncFunc(); } catch (error) { console.log(error); }

C. asyncFunc().catch(error => console.log(error));

D. try { await asyncFunc(); } catch (error) { console.log(error); }

Solution

1. Step 1: Identify correct try...catch syntax

   try...catch blocks wrap code that might throw errors; await must be inside try.

2. Step 2: Check each option's syntax

   try { await asyncFunc(); } catch (error) { console.log(error); } correctly wraps await in try and catches errors; others have syntax errors or misuse await.

3. Final Answer:

   try { await asyncFunc(); } catch (error) { console.log(error); } -> Option D

4. Quick Check:

   Correct try...catch with await = try { await asyncFunc(); } catch (error) { console.log(error); } [OK]

Hint: Put await inside try block to catch errors [OK]

Common Mistakes:

• Placing await outside try block
• Using incorrect try...catch syntax
• Confusing promise.catch with try...catch

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

async function fetchData() {
  try {
    let result = await Promise.reject('Failed');
    console.log('Success:', result);
  } catch (error) {
    console.log('Error:', error);
  }
}
fetchData();

medium

A. Success: Failed

B. Error: Failed

C. Uncaught (in promise) Failed

D. No output

Solution

1. Step 1: Analyze Promise.reject inside try block

   Promise.reject('Failed') creates a rejected promise; await pauses until rejection.

2. Step 2: Catch block handles the rejection error

   The rejection triggers catch block, printing 'Error: Failed'.

3. Final Answer:

   Error: Failed -> Option B

4. Quick Check:

   Rejected promise caught = Error: Failed [OK]

Hint: Rejected promises inside try trigger catch block [OK]

Common Mistakes:

• Expecting success message on rejection
• Missing catch block causes unhandled rejection
• Confusing Promise.reject with Promise.resolve

4. Identify the error in this code snippet:

async function load() {
  try {
    const data = await fetch('https://api.example.com/data');
  } catch {
    console.log('Fetch failed');
  }
}
load();

medium

A. Missing error parameter in catch block

B. fetch cannot be awaited

C. async keyword is missing

D. try block cannot contain await

Solution

1. Step 1: Check catch block syntax

   Catch block should have an error parameter to receive the error object.

2. Step 2: Confirm other parts are correct

   fetch returns a promise and can be awaited; async keyword is present; try can contain await.

3. Final Answer:

   Missing error parameter in catch block -> Option A

4. Quick Check:

   Catch needs error parameter = Missing error parameter in catch block [OK]

Hint: Always include error parameter in catch(e) [OK]

Common Mistakes:

• Omitting error parameter in catch
• Thinking fetch is synchronous
• Removing async keyword by mistake

5. You want to fetch user data and then fetch posts for that user. If either fetch fails, you want to log the error and continue without stopping the program. Which code correctly handles errors using async/await?

hard

A. async function getUserAndPosts() {
try {
const user = await fetch('/user');
const posts = await fetch(`/posts?userId=${user.id}`);
} catch (e) {
console.log('Error:', e);
}
}

B. async function getUserAndPosts() {
const user = await fetch('/user').catch(e => console.log('User fetch error:', e));
const posts = await fetch(`/posts?userId=${user.id}`).catch(e => console.log('Posts fetch error:', e));
}

C. async function getUserAndPosts() {
try {
const user = await fetch('/user');
} catch (e) {
console.log('User fetch error:', e);
}
try {
const posts = await fetch(`/posts?userId=${user.id}`);
} catch (e) {
console.log('Posts fetch error:', e);
}
}

D. async function getUserAndPosts() {
const user = fetch('/user');
const posts = fetch(`/posts?userId=${user.id}`);
console.log('Data fetched');
}

Solution

1. Step 1: Understand error handling for multiple awaits

   Separate try...catch blocks allow handling errors individually without stopping the whole function.

2. Step 2: Analyze each option

   async function getUserAndPosts() { try { const user = await fetch('/user'); } catch (e) { console.log('User fetch error:', e); } try { const posts = await fetch(`/posts?userId=${user.id}`); } catch (e) { console.log('Posts fetch error:', e); } } uses separate try...catch for user and posts fetch, logging errors and continuing execution. async function getUserAndPosts() { try { const user = await fetch('/user'); const posts = await fetch(`/posts?userId=${user.id}`); } catch (e) { console.log('Error:', e); } } stops on first error. async function getUserAndPosts() { const user = await fetch('/user').catch(e => console.log('User fetch error:', e)); const posts = await fetch(`/posts?userId=${user.id}`).catch(e => console.log('Posts fetch error:', e)); } mixes await with .catch but can cause undefined user. async function getUserAndPosts() { const user = fetch('/user'); const posts = fetch(`/posts?userId=${user.id}`); console.log('Data fetched'); } lacks await and error handling.

3. Final Answer:

   Option C correctly handles errors separately and continues execution -> Option C

4. Quick Check:

   Separate try...catch for each await = async function getUserAndPosts() { try { const user = await fetch('/user'); } catch (e) { console.log('User fetch error:', e); } try { const posts = await fetch(`/posts?userId=${user.id}`); } catch (e) { console.log('Posts fetch error:', e); } } [OK]

Hint: Use separate try...catch blocks to handle multiple awaits safely [OK]

Common Mistakes:

• Using one try...catch for multiple awaits stopping on first error
• Mixing await with .catch causing undefined variables
• Not awaiting fetch calls