Maintenant que les flux de transformation sont compatibles avec Chrome, Safari et Firefox, ils sont enfin prêts pour un lancement grand public !
L'API Streams vous permet de décomposer en petits fragments une ressource que vous souhaitez recevoir, envoyer ou transformer, puis de traiter ces fragments petit à petit. Récemment, Firefox 102 a commencé à prendre en charge TransformStream, ce qui signifie que TransformStream peut désormais être utilisé dans tous les navigateurs. Les flux de transformation vous permettent de rediriger depuis un ReadableStream vers un WritableStream, en exécutant une transformation sur les fragments, ou de consommer le résultat transformé directement, comme illustré dans l'exemple suivant.
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;
}
});