עכשיו, אחרי שהטרנספורמציה של סטרימינג נתמכת ב-Chrome, ב-Safari וב-Firefox, הם מוכנים עכשיו לטרנדים בפריים.
ה-Streams API מאפשר להציג פירוט של המשאב שאתם רוצים לקבל, לשלוח או להפוך למקטעי נתונים קטנים, ולאחר מכן לעבד את המקטעים האלה בהדרגה. לאחרונה, Firefox 102
התחילו לתמוך ב-TransformStream,
והמשמעות היא שעכשיו TransformStream
בסופו של דבר ניתן לשימוש בכל הדפדפנים. טרנספורמציה של זרמים מאפשרת
ReadableStream אל
WritableStream,
את המקטעים, או צורכת את התוצאה שעבר טרנספורמציה באופן ישיר,
כפי שאפשר לראות בדוגמה הבאה.
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;
}
});