1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
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) => {
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 }) => {
// 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>
|
