Chrome, Safari 및 Firefox에서 변환 스트림이 지원되었으므로 드디어 황금시간대에 준비가 되었습니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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;
}
});