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.