Await blocks ({#await}) in Svelte - Step-by-Step Execution

Concept Flow - Await blocks ({#await})

Start: Promise created

↓

Render {#await} block

↓

Check Promise state

↓

Pending

↓

Show pending UI

↓

Update DOM

The await block watches a promise and shows different UI for pending, success, or error states.

Execution Sample

Svelte

  <script>
    let promise = fetchData();
  </script>

  {#await promise}
    <p>Loading...</p>
  {:then data}
    <p>Data: {data}</p>
  {:catch error}
    <p>Error: {error.message}</p>
  {/await}

This code shows loading text while waiting, then data or error after promise settles.

Execution Table

Step	Promise State	Block Rendered	UI Shown	Notes
1	Pending	Pending block	<p>Loading...</p>	Promise just started, waiting for result
2	Fulfilled	Then block	<p>Data: {data}</p>	Promise resolved successfully with data
3	Rejected	Catch block	<p>Error: {error.message}</p>	Promise rejected with error
4	N/A	End	UI updated accordingly	Rendering finished based on promise state

💡 Promise settles (fulfilled or rejected), await block updates UI and stops pending state

Variable Tracker

Variable	Start	After Pending	After Fulfilled	After Rejected
promise	fetchData() call	pending	resolved with data	rejected with error
data	undefined	undefined	actual data value	undefined
error	undefined	undefined	undefined	error object

Key Moments - 3 Insights

Why does the pending block show before the promise resolves?

Because at Step 1 in the execution_table, the promise is still pending, so Svelte renders the pending block UI.

What happens if the promise rejects after showing the pending block?

At Step 3, the promise state changes to rejected, so Svelte switches to render the catch block UI showing the error.

Can the then block run without the promise resolving?

No, as shown in Step 2, the then block only renders after the promise is fulfilled with data.

Visual Quiz - 3 Questions

Look at the execution_table, what UI is shown at Step 1?

A <p>Loading...</p>

B <p>Data: {data}</p>

C <p>Error: {error.message}</p>

D No UI shown

💡 Hint

Check the 'UI Shown' column for Step 1 in the execution_table

At which step does the promise reject and show an error message?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Promise State' and 'Block Rendered' columns in the execution_table

If the promise never resolves or rejects, which block stays visible?

A Then block

B Catch block

C Pending block

D No block

💡 Hint

Refer to the 'Promise State' and 'Block Rendered' at Step 1 in the execution_table

Concept Snapshot

Await blocks in Svelte watch a promise.
Show pending UI while waiting.
Show then UI on success with data.
Show catch UI on error.
Syntax: {#await promise}...{:then data}...{:catch error}...{/await}

Full Transcript

In Svelte, the await block lets you handle promises easily in your UI. When you start a promise, the block shows a pending message. Once the promise finishes successfully, it shows the data using the then block. If the promise fails, it shows an error message using the catch block. This flow helps keep your UI responsive and clear about loading states. The execution table shows how the UI changes step by step as the promise state changes from pending to fulfilled or rejected.

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