Streaming with promises in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a promise that resolves after 2 seconds.

Svelte

const dataPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve([1]);
  }, 2000);
});

Drag options to blanks, or click blank then click option'

A'Data loaded'

Bconsole.log('Done')

Creject('Error')

DsetTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using reject instead of resolve

Calling console.log inside resolve

Passing setTimeout instead of a value

The promise resolves with the string 'Data loaded' after 2 seconds.

2fill in blank

medium

Complete the code to await the promise and store the result in a variable.

Svelte

async function loadData() {
  const result = await [1];
  return result;
}

Drag options to blanks, or click blank then click option'

AfetchData()

BsetTimeout()

CdataPromise

DPromise.resolve()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling fetchData() which is undefined

Using setTimeout() which is not a promise

Using Promise.resolve() without data

We await the previously created dataPromise to get the resolved data.

3fill in blank

hard

Fix the error in the Svelte component to show loading text while waiting for the promise.

Svelte

<script>
  let data = null;
  let loading = true;

  dataPromise.then(value => {
    data = value;
    [1] = false;
  });
</script>

{#if loading}
  <p>Loading...</p>
{:else}
  <p>{data}</p>
{/if}

Drag options to blanks, or click blank then click option'

AdataPromise

Bdata

Cvalue

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Setting data to false instead of loading

Using value or dataPromise incorrectly

Not updating loading state

We set loading to false after the promise resolves to update the UI.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates when the promise resolves.

Svelte

<script>
  let data = null;
  let loading = true;

  $: [1] = loading ? 'Loading...' : data;

  dataPromise.then(value => {
    data = value;
    [2] = false;
  });
</script>

Drag options to blanks, or click blank then click option'

AdisplayText

Bloading

Cdata

DisLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Using data instead of displayText in reactive statement

Setting isLoading instead of loading

Not using reactive syntax

The reactive variable displayText shows loading or data based on loading.

5fill in blank

hard

Fill all three blanks to create a Svelte component that streams data chunks and updates the UI.

Svelte

<script>
  import { onMount } from 'svelte';
  let chunks = [];
  let loading = true;

  async function streamData() {
    const response = await fetch('/stream');
    const reader = response.body.getReader();
    while(true) {
      const { done, value } = await reader.read();
      if(done) break;
      chunks = [...chunks, new TextDecoder().[1](value)];
    }
    [2] = false;
  }

  onMount(() => {
    [3]();
  });
</script>

{#if loading}
  <p>Loading stream...</p>
{:else}
  <p>{chunks.join('')}</p>
{/if}

Drag options to blanks, or click blank then click option'

Adecode

Bloading

CstreamData

Dread

Attempts:

3 left

💡 Hint

Common Mistakes

Using read instead of decode

Not setting loading to false

Not calling streamData on mount

The decode method converts bytes to text, loading is set false after streaming, and streamData is called on mount.