TransformStream अब क्रॉस-ब्राउज़र का इस्तेमाल करता है

Chrome, Safari, और Firefox में अब स्ट्रीम को बदलने की सुविधा काम करती है. अब ये प्राइम टाइम के लिए तैयार हैं!

ब्राउज़र सहायता

  • Chrome: 67. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 102. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 14.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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;
  }
});

डेमो