---
title: ReadableStream
slug: Web/API/ReadableStream
tags:
  - API
  - Fetch
  - Interface
  - Reference
  - Streams
translation_of: Web/API/ReadableStream
---
<p>{{APIRef("Streams")}}{{SeeCompatTable}}</p>

<p><span class="seoSummary">Das <code>ReadableStream</code> Interface der <a href="/en-US/docs/Web/API/Streams_API">Streams API</a> repräsentiert einen lesbaren Datenstrom von Bytes.</span></p>

<h2 id="Konstruktor">Konstruktor</h2>

<dl>
 <dt>{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}</dt>
 <dd>Erstellt eine Instanz des <code>ReadableStream</code> Interfaces.</dd>
</dl>

<h2 id="Eigenschaften">Eigenschaften</h2>

<dl>
 <dt>{{domxref("ReadableStream.locked")}} {{readonlyInline}}</dt>
 <dd>Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<dl>
 <dt>{{domxref("ReadableStream.cancel()")}}</dt>
 <dd>Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene <code>reason</code> Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. </dd>
 <dt>{{domxref("ReadableStream.getReader()")}}</dt>
 <dd>Erstellt einen Reader, dessen Typ durch die <code>mode</code> Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd>
 <dt>{{domxref("ReadableStream.getIterator()")}}</dt>
 <dd>Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd>
 <dt>{{domxref("ReadableStream.pipeThrough()")}}</dt>
 <dd>Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.</dd>
 <dt>{{domxref("ReadableStream.pipeTo()")}}</dt>
 <dd>Pipet den aktuellen <code>ReadableStream</code> zu einem gegebenen {{domxref("WritableStream")}} und gibt ein {{domxref("Promise")}} zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.</dd>
 <dt>{{domxref("ReadableStream.tee()")}}</dt>
 <dd>Verzweigt den <code>ReadableStream</code> in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.</dd>
 <dt>{{domxref("ReadableStream[@@asyncIterator]()")}}</dt>
 <dd>Alias der <code>getIterator</code>-Methode.</dd>
</dl>

<h2 id="Benutzung">Benutzung</h2>

<p>Im folgenden Beispiel wird eine {{domxref("Response")}} erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.</p>

<p>Dadurch wird die Benutzung von {{domxref("ReadableStream")}} in Kombination mit {{domxref("Uint8Array")}} gezeigt.</p>

<pre class="brush: js notranslate">fetch("https://www.example.org/").then((response) =&gt; {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // Die folgende Funktion behandelt jeden Daten-Chunk
      function push() {
        // "done" ist ein Boolean und "value" ein "Uint8Array"
        return reader.read().then(({ done, value }) =&gt; {
          // Gibt es weitere Daten zu laden?
          if (done) {
            // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind
            controller.close();
            return;
          }

          // Bekomme die Daten und sende diese an den Browser durch den Controller weiter
          controller.enqueue(value);
        }).then(push);
      };

      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('Streams','#rs-class','ReadableStream')}}</td>
   <td>{{Spec2('Streams')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>{{Compat("api.ReadableStream")}}</div>