Await blocks ({#await}) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The {#await} block lets you handle promises directly in your Svelte templates. It shows different content while waiting, when resolved, or if an error occurs.

beginner

How do you show a loading message while waiting for a promise in a Svelte {#await} block?

Use the pending part of the block. The content before :then runs while waiting (pending). For example:<br>{#await promise} Loading... {/await}

intermediate

How can you handle errors in a Svelte {#await} block?

Use the :catch block inside {#await}. It shows content if the promise rejects. Example:<br>{#await promise}<br>Loading...<br>:then data<br>Show data<br>:catch error<br>Show error message<br>{/await}

intermediate

What happens if you omit the :then block in a Svelte {#await} block?

If you omit :then, the block only shows the pending or catch content. You won't see the resolved data because there's no place to display it.

beginner

Can you use multiple {#await} blocks in one Svelte component?

Yes, you can use as many {#await} blocks as you want. Each handles its own promise independently, letting you show loading, success, or error states for each async task.

What part of the {#await} block runs while the promise is still loading?

A The content before <code>:then</code>

B The content inside <code>:then</code>

C The content inside <code>:catch</code>

D The content after <code>{/await}</code>

The content before :then runs while the promise is pending (loading).

How do you access the resolved value of a promise inside a {#await} block?

A Inside the <code>:then</code> block with a variable

B Inside the <code>:catch</code> block

C Before the <code>{#await}</code> block

D You cannot access it

The resolved value is passed as a variable to the :then block.

What does the :catch block do in a {#await} block?

A Shows content after the promise resolves

B Shows content while the promise is loading

C Cancels the promise

D Shows content if the promise rejects with an error

The :catch block handles errors if the promise fails.

Is it possible to omit the :catch block in a {#await} block?

A No, it is required

B Yes, but errors won’t be handled in the UI

C Yes, and errors will be automatically handled

D No, it causes a syntax error

You can omit :catch, but then errors won’t show any UI feedback.

Can you nest {#await} blocks inside each other in Svelte?

A No, nesting is not allowed

B Only if the promises are related

C Yes, to handle multiple async steps

D Only inside <code>:catch</code> blocks

You can nest {#await} blocks to handle multiple async operations step-by-step.

Explain how to use the {#await} block in Svelte to show loading, success, and error states for a promise.

Think about the three parts of the block: waiting, success, and failure.

Describe what happens if you omit the :then block in a {#await} block and why you might want to include it.

Consider how the UI changes when the promise finishes.