Streaming with promises in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render initially?

Consider this Svelte component that uses a promise to fetch data and streams the result. What will the user see on the page before the promise resolves?

Svelte

<script>
  let dataPromise = new Promise((resolve) => {
    setTimeout(() => resolve('Hello from promise!'), 2000);
  });
</script>

<p>{#await dataPromise}
  Loading...
{:then data}
  {data}
{/await}</p>

A Loading...

B Hello from promise!

C An error message

D Nothing is rendered

💡 Hint

Think about what the #await block shows before the promise finishes.

The #await block shows the content inside it before the promise resolves. So initially, it shows "Loading..." until the promise finishes.

❓ state_output

intermediate

What is the final displayed text after promise resolves?

This Svelte component streams a promise that resolves after 1 second. What text will be shown after the promise resolves?

Svelte

<script>
  let promise = new Promise((res) => setTimeout(() => res('Data loaded'), 1000));
</script>

{#await promise}
  <p>Waiting...</p>
{:then result}
  <p>{result}</p>
{/await}

A <p>undefined</p>

B <p>Data loaded</p>

C <p>Waiting...</p>

D No content rendered

💡 Hint

What does the {:then} block do?

After the promise resolves, the {:then} block runs and displays the resolved value inside a paragraph.

📝 Syntax

advanced

Which option correctly streams a promise in Svelte?

You want to show a loading message while waiting for a promise and then show the data once it resolves. Which code snippet correctly uses Svelte's #await block?

A

{#await fetchData}
  <p>Loading...</p>
{:then data}
  <p>{data}</p>
{/await}

B

{#await fetchData()}
  <p>Loading...</p>
{:then}
  <p>{data}</p>
{/await}

C

{#await fetchData()}
  <p>Loading...</p>
{:catch error}
  <p>{error}</p>
{/await}

D

{#await fetchData()}
  <p>Loading...</p>
{:then data}
  <p>{data}</p>
{/await}

💡 Hint

Remember to call the function returning the promise and use the correct syntax for then block.

Option D correctly calls the function and uses {:then data} to capture the resolved value. Option D misses parentheses, C misses {:then} block, and D misses the variable name after then.

🔧 Debug

advanced

Why does this Svelte component throw an error?

This component tries to stream a promise but throws an error. What is the cause?

Svelte

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

{#await promise}
  <p>Loading...</p>
{:then data}
  <p>{data.message}</p>
{/await}

A The API response does not have a 'message' property, causing undefined error

B The promise is not awaited properly inside the script tag

C The #await block syntax is incorrect and missing curly braces

D The fetch call must be inside onMount lifecycle hook

💡 Hint

Check what the API returns and if the property accessed exists.

The error happens because data.message is accessed but the API response does not contain a 'message' property, causing a runtime error.

🧠 Conceptual

expert

What happens if a promise inside a Svelte #await block rejects without a catch?

Consider a Svelte component using a promise inside an #await block. The promise rejects but there is no {:catch} block. What will the user see?

Svelte

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

{#await promise}
  <p>Loading...</p>
{:then data}
  <p>{data}</p>
{/await}

A The component will display nothing after rejection

B The component will automatically show the rejection message

C The component will crash and show an error in the console

D The component will display 'Loading...' forever

💡 Hint

Think about how Svelte handles promise rejections without a catch block.

If a promise rejects and there is no {:catch} block, Svelte throws an error and the component crashes, showing an error in the console.