Why asynchronous programming is needed in Javascript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log a message after 2 seconds using setTimeout.

Javascript

setTimeout(() => { console.log('Hello after 2 seconds'); }, [1]);

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

A2

B2000

C'2 seconds'

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 2 instead of 2000, which causes the delay to be 2 milliseconds.

The setTimeout function expects the delay in milliseconds. 2000 ms equals 2 seconds.

2fill in blank

medium

Complete the code to fetch data asynchronously using fetch and log the response.

Javascript

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

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

Ajson

Btext

Csend

Dparse

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns plain text instead of JSON.

The response.json() method parses the response body as JSON.

3fill in blank

hard

Fix the error in the async function to await the fetch call.

Javascript

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

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

Aasync

Breturn

Cthen

Dawait

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting await causes response to be a promise, not the actual response.

The await keyword pauses the function until the fetch promise resolves.

4fill in blank

hard

Fill both blanks to create a promise that resolves after 1 second.

Javascript

const wait = () => new Promise(([1], [2]) => {
  setTimeout(resolve, 1000);
});

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

Aresolve

Breject

Ccallback

Ddone

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names like callback or done.

A promise executor function receives two arguments: resolve and reject.

5fill in blank

hard

Fill all three blanks to handle errors in an async function using try-catch.

Javascript

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

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

A'https://api.example.com/data'

Bjson

Cerror

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names or missing quotes around the URL.

The fetch function needs the URL string, response.json() parses JSON, and the catch block catches the error variable.