Why async and await are needed in Javascript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a function that returns a promise.

Javascript

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data loaded'), [1]);
  });
}

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

A'1000'

BsetTimeout

C1000

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number for delay time.

The number 1000 means 1000 milliseconds (1 second) delay before resolving the promise.

2fill in blank

medium

Complete the code to use async function syntax.

Javascript

async function [1]() {
  const result = await fetchData();
  console.log(result);
}

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

AloadData

BgetData

CfetchData

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name as the promise function, which can cause confusion.

The function name can be anything, but here we choose 'loadData' to show an async function that waits for data.

3fill in blank

hard

Fix the error in the code by adding the missing keyword.

Javascript

async function load() {
  const data = [1] fetchData();
  console.log(data);
}

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

Aawait

Basync

Cthen

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'await' outside an async function causes an error.

The 'await' keyword is needed to wait for the promise to resolve inside an async function.

4fill in blank

hard

Fill both blanks to correctly handle the promise result.

Javascript

async function getData() {
  try {
    const result = [1] fetchData();
    console.log([2]);
  } catch (error) {
    console.error(error);
  }
}

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

Aawait

Bresult

Cdata

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the function name instead of the result variable.

Use 'await' to wait for the promise, and then log the variable 'result' that holds the data.

5fill in blank

hard

Fill all three blanks to create an async function that fetches data and handles errors.

Javascript

async function fetchAndProcess() {
  try {
    const [1] = [2] fetchData();
    console.log([3]);
  } catch (err) {
    console.error('Error:', err);
  }
}

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

Adata

Bawait

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using the function name instead of the awaited result variable.

We declare a variable 'data', use 'await' to wait for the promise, and then log 'data'.