Streaming with promises in Svelte

Introduction

Streaming with promises lets you show data bit by bit as it arrives, instead of waiting for everything to load. This makes apps feel faster and smoother.

Loading large files or images progressively so users see content sooner.

Fetching live data feeds like chat messages or notifications.

Displaying search results as they come in without waiting for all results.

Showing video or audio streams that start playing immediately.

Handling slow network responses by updating UI step-by-step.

Syntax

Svelte

let dataPromise = fetch('url').then(response => {
  const reader = response.body.getReader();
  return new ReadableStream({
    start(controller) {
      function push() {
        reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          push();
        });
      }
      push();
    }
  });
});

This code uses fetch to get data and reads it in chunks using a ReadableStream.

The reader.read() method returns a promise that resolves with a chunk of data or signals the end.

Examples

Simple example getting the raw stream from a fetch response.

Svelte

let streamPromise = fetch('/api/data').then(res => res.body);

This example reads the stream chunk by chunk and converts it to text.

Svelte

let textStream = fetch('/api/text').then(async res => {
  const reader = res.body.getReader();
  let result = '';
  while(true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += new TextDecoder().decode(value, { stream: true });
  }
  return result;
});

This example collects all chunks and parses them as JSON after streaming.

Svelte

let jsonStream = fetch('/api/json').then(async res => {
  const reader = res.body.getReader();
  let chunks = [];
  while(true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  const full = new Uint8Array(chunks.flatMap(c => Array.from(c)));
  return JSON.parse(new TextDecoder().decode(full));
});

Sample Program

This Svelte component fetches a post and streams its text content. It updates the UI as chunks arrive, showing a loading message until done.

Svelte

<script>
  import { onMount } from 'svelte';
  let streamedText = '';
  let loading = true;
  onMount(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    while(true) {
      const { done, value } = await reader.read();
      if (done) break;
      streamedText += decoder.decode(value, { stream: true });
    }
    loading = false;
  });
</script>

<main>
  {#if loading}
    <p>Loading content...</p>
  {:else}
    <pre>{streamedText}</pre>
  {/if}
</main>

Important Notes

Streaming lets users see data faster, but handling partial data requires careful UI updates.

Always handle errors and network issues when working with streams.

Use TextDecoder with the stream: true option to decode chunks properly.

Summary

Streaming with promises helps show data bit by bit for faster user feedback.

Use fetch with ReadableStream and reader.read() to get chunks.

Update your UI as chunks arrive to improve user experience.