أصبحت TransformStream الآن متوافقة مع جميع المتصفحات

بعد أن أصبح بإمكانك استخدام ميزة "نقل البيانات وتحويلها" في Chrome وSafari وFirefox، أصبحت هذه الميزة جاهزة للاستخدام.

Browser Support

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

تتيح لك 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;
  }
});

عرض توضيحي