Da Transform-Streams jetzt in Chrome, Safari und Firefox unterstützt werden, ist es endlich soweit!
Mit der Streams API können Sie eine Ressource, die Sie empfangen, senden oder umwandeln möchten, in kleine Blöcke aufteilen und diese dann Stück für Stück verarbeiten. Seit Kurzem wird in Firefox 102 TransformStream unterstützt. Das bedeutet, dass TransformStream jetzt endlich in Browsern verwendet werden kann. Mit Transformationsstreams können Sie eine Pipe von einer ReadableStream an eine WritableStream senden, eine Transformation für die Blöcke ausführen oder das transformierte Ergebnis direkt verwenden, wie im folgenden Beispiel gezeigt.
class UpperCaseTransformStream {
constructor() {
return new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
},
});
}
}
button.addEventListener('click', async () => {
const response = await fetch('/script.js');
const readableStream = response.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(new UpperCaseTransformStream());
const reader = readableStream.getReader();
pre.textContent = '';
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
pre.textContent += value;
}
});