Await blocks ({#await}) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a loading message while waiting for the promise.

Svelte

<script>
  let dataPromise = fetch('/api/data').then(res => res.json());
</script>

{#await [1]
  <p>Loading...</p>
{/await}

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

AfetchData()

Bdata

CdataPromise

DpromiseData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-promise variable inside the await block.

Forgetting to use the promise variable name.

The {#await} block waits for the promise dataPromise to resolve or reject.

2fill in blank

medium

Complete the code to display the resolved data inside the await block.

Svelte

{#await dataPromise}
  <p>Loading...</p>
{:then [1]
  <p>{user.name}</p>
{/await}

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

Auser

Bresponse

Cresult

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the one declared after :then.

Not declaring a variable after :then.

The :then block receives the resolved value, here named user.

3fill in blank

hard

Fix the error in the await block to handle errors properly.

Svelte

{#await dataPromise}
  <p>Loading...</p>
{:then user}
  <p>{user.name}</p>
{:catch [1]
  <p>Error: {error.message}</p>
{/await}

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

Ae

Berr

Cexception

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the one inside the error message.

Not declaring a variable after :catch.

The variable after :catch must match the one used inside the block, here error.

4fill in blank

hard

Fill both blanks to show a loading message and handle the resolved data.

Svelte

{#await [1]
  <p>Loading data...</p>
{:then [2]
  <p>{info.title}</p>
{/await}

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

AfetchInfo()

BdataPromise

Cinfo

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the promise variable and the resolved data variable.

Using a function call instead of a promise variable in the await block.

The {#await} block waits for dataPromise. The resolved data is named info.

5fill in blank

hard

Fill all three blanks to handle loading, success, and error states in the await block.

Svelte

{#await [1]
  <p>Loading...</p>
{:then [2]
  <p>{data.message}</p>
{:catch [3]
  <p>Error: {err.message}</p>
{/await}

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

AfetchMessage()

Bdata

Cerr

DmessagePromise

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names between the catch block and inside it.

Not matching the promise variable name in the await block.

The promise is messagePromise. The resolved data is data. The error variable is err.