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.

Practice

1. What is the main benefit of using streaming with promises in Svelte when fetching data?

easy

A. It allows showing data bit by bit for faster user feedback.

B. It delays showing any data until the entire response is received.

C. It automatically caches all data without extra code.

D. It prevents any UI updates until the promise fully resolves.

Solution

1. Step 1: Understand streaming with promises

   Streaming lets you process data as it arrives, not waiting for all data.

2. Step 2: Connect streaming to user experience

   Showing data bit by bit gives faster feedback, improving user experience.

3. Final Answer:

   It allows showing data bit by bit for faster user feedback. -> Option A

4. Quick Check:

   Streaming = faster feedback [OK]

Hint: Streaming means showing data as it arrives, not waiting [OK]

Common Mistakes:

• Thinking streaming waits for full data
• Confusing streaming with caching
• Believing UI updates only after full promise resolves

2. Which of the following is the correct way to start reading chunks from a fetch response stream in Svelte?

easy

A. const reader = response.getReader();

B. const reader = response.body.getReader();

C. const reader = response.readableStream();

D. const reader = response.streamReader();

Solution

1. Step 1: Identify how to access the stream reader

   The fetch response has a body property which is a ReadableStream.

2. Step 2: Use the correct method to get the reader

   Calling getReader() on response.body returns the reader.

3. Final Answer:

   const reader = response.body.getReader(); -> Option B

4. Quick Check:

   Use response.body.getReader() [OK]

Hint: Remember: reader comes from response.body.getReader() [OK]

Common Mistakes:

• Calling getReader() directly on response
• Using non-existent methods like readableStream()
• Confusing response.body with response itself

3. Given this Svelte code snippet, what will be logged to the console?

async function fetchData() {
  const response = await fetch('/data');
  const reader = response.body.getReader();
  const { value, done } = await reader.read();
  console.log(new TextDecoder().decode(value));
}
fetchData();

medium

A. The first chunk of data from the response decoded as text.

B. The entire response body as a string.

C. An error because reader.read() returns a promise without value.

D. Undefined because value is not set.

Solution

1. Step 1: Understand reader.read() output

   reader.read() returns a promise resolving to an object with value (chunk) and done (boolean).

2. Step 2: Decode the first chunk

   The code decodes the first chunk's bytes to text and logs it.

3. Final Answer:

   The first chunk of data from the response decoded as text. -> Option A

4. Quick Check:

   reader.read() gives first chunk [OK]

Hint: reader.read() returns first chunk and done flag [OK]

Common Mistakes:

• Assuming reader.read() returns full response
• Expecting reader.read() to return undefined value
• Confusing promise with direct value

4. What is wrong with this Svelte code that tries to stream data from fetch?

async function load() {
  const response = await fetch('/api');
  const reader = response.getReader();
  while(true) {
    const { value, done } = await reader.read();
    if(done) break;
    console.log(value);
  }
}

medium

A. Using while(true) causes infinite loop.

B. Missing await before fetch call.

C. Calling getReader() directly on response instead of response.body.

D. Not decoding value before logging.

Solution

1. Step 1: Check how getReader() is called

   getReader() must be called on response.body, not on response itself.

2. Step 2: Identify the error cause

   Calling response.getReader() will cause a runtime error because response has no such method.

3. Final Answer:

   Calling getReader() directly on response instead of response.body. -> Option C

4. Quick Check:

   Use response.body.getReader() [OK]

Hint: getReader() is on response.body, not response [OK]

Common Mistakes:

• Calling getReader() on response
• Forgetting to decode chunks
• Thinking while(true) always causes infinite loop

5. You want to display a loading message that updates with each chunk of streamed data in Svelte. Which approach correctly updates the UI as chunks arrive?

hard

A. Update a local variable inside the async function without reactive binding.

B. Wait for all chunks, then update the UI once with the full data.

C. Use setTimeout to delay UI updates until streaming finishes.

D. Use a writable store to append each decoded chunk and bind it to the UI.

Solution

1. Step 1: Understand UI reactivity in Svelte

   Svelte updates the UI when reactive variables or stores change.

2. Step 2: Choose a method to update UI per chunk

   Using a writable store to append each chunk triggers UI updates as data arrives.

3. Step 3: Why other options fail

   Waiting for all chunks delays UI update; setTimeout delays unnecessarily; local variable changes without binding won't update UI.

4. Final Answer:

   Use a writable store to append each decoded chunk and bind it to the UI. -> Option D

5. Quick Check:

   Writable store + binding = live UI updates [OK]

Hint: Use writable store to update UI reactively per chunk [OK]

Common Mistakes:

• Updating local variables without reactive binding
• Waiting for full data before UI update
• Using timers instead of reactive stores