Await blocks ({#await}) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Svelte await block render initially?

Consider this Svelte component code:

<script>
  let promise = new Promise(resolve => setTimeout(() => resolve('Done!'), 2000));
</script>

{#await promise}
  Loading...
{:then result}
  {result}
{:catch error}
  Error: {error.message}
{/await}

What will the user see immediately after the component loads?

Svelte

let promise = new Promise(resolve => setTimeout(() => resolve('Done!'), 2000));

{#await promise}
  Loading...
{:then result}
  {result}
{:catch error}
  Error: {error.message}
{/await}

A The text 'Done!' is shown immediately.

B The text 'Loading...' is shown immediately.

C The text 'Error: undefined' is shown immediately.

D Nothing is shown until the promise resolves.

💡 Hint

Think about what happens before the promise finishes.

The await block shows the first block (the loading state) while the promise is pending. So 'Loading...' appears immediately.

❓ state_output

intermediate

What is displayed after the promise rejects?

Given this Svelte code:

<script>
  let promise = new Promise((_, reject) => setTimeout(() => reject(new Error('Fail')), 1000));
</script>

{#await promise}
  Waiting...
{:then data}
  Success: {data}
{:catch err}
  Error: {err.message}
{/await}

What will the component display after 1 second?

Svelte

let promise = new Promise((_, reject) => setTimeout(() => reject(new Error('Fail')), 1000));

{#await promise}
  Waiting...
{:then data}
  Success: {data}
{:catch err}
  Error: {err.message}
{/await}

A Error: Fail

B Success: undefined

C Waiting...

D Nothing is displayed after rejection.

💡 Hint

Check the {:catch} block usage.

When the promise rejects, the {:catch} block runs and shows the error message 'Fail'.

📝 Syntax

advanced

Which option correctly uses an await block with only a then block?

You want to show a loading message while waiting and then show data when ready, but no catch block. Which code is correct?

A

{#await promise}
  Loading...
{:then data}
  {data}
{/await}

B

{#await promise}
  Loading...
{:then data}
  {data}
{:else}
  Error
{/await}

C

{#await promise}
  Loading...
{:then data}
  {data}
{:catch error}
  Error
{/await}

D

{#await promise}
  Loading...
{:catch error}
  {error.message}
{:then data}
  {data}
{/await}

💡 Hint

Remember the order and presence of blocks in await syntax.

The await block can have a loading block and a then block. The catch block is optional but must come after then if present. Option A correctly omits catch.

🔧 Debug

advanced

Why does this await block cause a runtime error?

Examine this code:

<script>
  let promise = Promise.resolve('Hello');
</script>

{#await promise}
  Loading...
{:then}
  {data}
{/await}

What causes the error when rendering?

Svelte

let promise = Promise.resolve('Hello');

{#await promise}
  Loading...
{:then}
  {data}
{/await}

A The loading block must be empty for resolved promises.

B The promise is not awaited properly in the script.

C The then block is missing the variable name to receive the resolved value.

D The catch block is required for all await blocks.

💡 Hint

Check the syntax of the {:then} block.

The {:then} block must specify a variable name to hold the resolved value. Missing it causes a runtime error because {data} is undefined.

🧠 Conceptual

expert

How does Svelte handle multiple await blocks with the same promise?

If you use the same promise in two separate {#await} blocks in a component, what happens when the promise resolves?

A Svelte throws an error because the same promise cannot be awaited twice.

B Only the first await block updates; the second stays in loading state.

C Both await blocks cause the promise to run twice, doubling the delay.

D Both await blocks update independently and show the resolved value without extra waiting.

💡 Hint

Think about how promises work and how Svelte tracks them.

A promise is a single object representing one future value. Multiple await blocks using the same promise share its state and update when it resolves.

Practice

1. What is the main purpose of the {#await} block in Svelte?

easy

A. To handle asynchronous data by showing loading, success, and error states

B. To create loops for rendering lists

C. To define reactive variables

D. To style components conditionally

Solution

1. Step 1: Understand the role of {#await} in Svelte

   The {#await} block is designed to handle promises and asynchronous data by showing different UI states while waiting, on success, or on error.

2. Step 2: Compare with other options

   Creating loops is done with {#each}, defining reactive variables with let or $:, and styling conditionally with class: or style:, which are not the purpose of {#await}.

3. Final Answer:

   To handle asynchronous data by showing loading, success, and error states -> Option A

4. Quick Check:

   Await blocks = handle async states [OK]

Hint: Await blocks manage async loading and errors [OK]

Common Mistakes:

• Confusing await blocks with loops
• Thinking await blocks define reactive variables
• Assuming await blocks are for styling

2. Which of the following is the correct syntax to start an await block in Svelte for a promise named dataPromise?

easy

A. {#await: dataPromise} ... {/await}

B. {#await (dataPromise)} ... {/await}

C. {#await await dataPromise} ... {/await}

D. {#await dataPromise} ... {/await}

Solution

1. Step 1: Recall the basic syntax of await blocks

   The correct syntax is {#await promise} followed by the block content and closed with {/await}.

2. Step 2: Analyze each option

   {#await dataPromise} ... {/await} matches the correct syntax. {#await (dataPromise)} ... {/await} adds unnecessary parentheses. {#await await dataPromise} ... {/await} repeats 'await' incorrectly. {#await: dataPromise} ... {/await} uses a colon which is invalid.

3. Final Answer:

   {#await dataPromise} ... {/await} -> Option D

4. Quick Check:

   Correct await syntax = {#await dataPromise} ... {/await} [OK]

Hint: Use {#await promise} without extra symbols [OK]

Common Mistakes:

• Adding parentheses around the promise
• Repeating the 'await' keyword inside the block
• Using colons after #await

3. Given the following Svelte code snippet:

{#await fetchData()}
  
Loading...

:then data
  
{data.message}

:catch error
  
Error: {error.message}

{/await}

What will be displayed if fetchData() returns a promise that resolves to { message: 'Hello!' }?

medium

A. Loading...

B. Error: ...

C. Hello!

D. Nothing will be displayed

Solution

1. Step 1: Understand the promise resolution

   The promise returned by fetchData() resolves successfully with an object containing { message: 'Hello!' }.

2. Step 2: Determine which await block section runs

   Since the promise resolves, the :then block runs, displaying {data.message} which is 'Hello!'.

3. Final Answer:

   <p>Hello!</p> -> Option C

4. Quick Check:

   Resolved promise shows then block [OK]

Hint: Resolved promise shows :then content [OK]

Common Mistakes:

• Thinking loading shows after resolution
• Confusing :catch with :then
• Expecting no output on success

4. Identify the error in this Svelte await block:

{#await loadData()}
  
Loading...

:then result
  
{result}

:catch
  
Error occurred

{/await}

medium

A. Incorrect use of :then keyword

B. Missing variable name after :catch

C. No closing {/await} tag

D. Promises cannot be used in await blocks

Solution

1. Step 1: Review the :catch syntax in await blocks

   The :catch block must include a variable name to capture the error, like :catch error.

2. Step 2: Check the given code

   The code uses :catch without a variable name, which is a syntax error.

3. Final Answer:

   Missing variable name after :catch -> Option B

4. Quick Check:

   :catch needs error variable [OK]

Hint: Always name error after :catch [OK]

Common Mistakes:

• Omitting error variable in :catch
• Forgetting {/await} closing tag
• Misusing :then keyword

5. You want to show a loading spinner while waiting for userData promise, display the user's name on success, and show a retry button on error. Which Svelte await block correctly implements this behavior?

hard

A. {#await userData} :then user {user.name}:catch error Retry{/await}

B. {#await userData} Loading...:then user {user.name}{/await}

C. {#await userData} :catch error Retry{/await}

D. {#await userData} :then user {user.name}:catch Retry{/await}

Solution

1. Step 1: Verify loading, success, and error states

   {#await userData}
   
   :then user
   

   {user.name}

   
   :catch error
   Retry
   {/await} shows a spinner during loading, displays user name on success with :then user, and shows a retry button with error variable error in :catch.

2. Step 2: Check other options for missing parts

   {#await userData}
   

   Loading...

   
   :then user
   

   {user.name}

   
   {/await} lacks error handling. {#await userData}
   
   :catch error
   Retry
   {/await} lacks success handling. {#await userData}
   
   :then user
   

   {user.name}

   
   :catch
   Retry
   {/await} misses error variable after :catch.

3. Final Answer:

   {#await userData}
   
   :then user
   

   {user.name}

   
   :catch error
   Retry
   {/await} -> Option A

4. Quick Check:

   All states with variables = {#await userData}
   
   :then user
   

   {user.name}

   
   :catch error
   Retry
   {/await} [OK]

Hint: Include loading, then, catch with variables [OK]

Common Mistakes:

• Omitting :catch block or error variable
• Missing :then block for success
• Not showing loading state properly