แรงดันย้อนกลับและการส่งต่อสตรีม
จัดการการควบคุมการไหลด้วย pipeTo และ pipeThrough
แรงดันย้อนกลับและการส่งต่อสตรีม เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาแรงดันย้อนกลับ
หากผู้ผลิตสร้างข้อมูลได้เร็วกว่าที่ผู้บริโภคจะจัดการได้ หน่วยความจำจะเต็ม แรงดันย้อนกลับ คือกลไกที่ผู้บริโภคซึ่งทำงานช้าบอกให้ผู้ผลิตที่ทำงานเร็วลดความเร็วลง
WritableStream
WritableStream คือปลายทางที่คุณเขียนชิ้นข้อมูลลงไป เมธอดปลายทาง write(chunk) อาจทำงานแบบอะซิงโครนัสเพื่อส่งสัญญาณว่าพร้อมรับชิ้นข้อมูลถัดไป
const sink = new WritableStream({
write(chunk) {
console.log("writing", chunk);
}
});การรับ Writer
getWriter() จะล็อกส่วนที่เขียนได้และส่งคืน writer ที่มี write(), close() และพรอมิส ready
const writer = sink.getWriter();
await writer.write("hello");
await writer.close();สัญญาณ ready
ให้รอ writer.ready ก่อนเขียนข้อมูล พรอมิสนี้จะเสร็จสมบูรณ์เมื่อสตรีมสามารถรับข้อมูลเพิ่มได้ ซึ่งแสดงการทำงานของแรงดันย้อนกลับ
await writer.ready;
await writer.write(chunk);pipeTo
readable.pipeTo(writable) เชื่อมต่อแหล่งข้อมูลเข้ากับปลายทางและจัดการแรงดันย้อนกลับให้คุณโดยอัตโนมัติ โดยส่งคืนพรอมิสที่จะเสร็จสมบูรณ์เมื่อการส่งข้อมูลต่อเสร็จสิ้น
await readableStream.pipeTo(writableStream);
console.log("done piping");pipeThrough
pipeThrough(transform) แทรกการแปลงข้อมูลระหว่างแหล่งข้อมูลกับปลายทาง แล้วส่งคืนสตรีมที่อ่านได้ซึ่งผ่านการแปลงแล้ว คุณสามารถเชื่อมต่อหลายขั้นตอนเพื่อสร้างสายการประมวลผล
sourceStream
.pipeThrough(new TextDecoderStream())
.pipeThrough(parser)
.pipeTo(consumer);ค่าขีดสูงของคิว
highWaterMark ของกลยุทธ์การจัดคิวจะกำหนดจำนวนชิ้นข้อมูลที่สามารถรออยู่ในคิวได้ก่อนที่แรงดันย้อนกลับจะเริ่มทำงาน ปรับค่านี้เพื่อสร้างสมดุลระหว่างปริมาณงานกับการใช้หน่วยความจำ
new ReadableStream(source, new CountQueuingStrategy({ highWaterMark: 4 }));desiredSize
desiredSize ของตัวควบคุมจะบอกผู้ผลิตว่าคิวเหลือพื้นที่เท่าใด เมื่อค่าลดลงจนถึงศูนย์หรือต่ำกว่า ให้หยุดเพิ่มข้อมูลเข้าคิว
pull(controller) {
while (controller.desiredSize > 0) {
controller.enqueue(nextChunk());
}
}การยกเลิกการส่งข้อมูลต่อ
ส่ง { signal } ให้กับ pipeTo เพื่อยกเลิกสายการประมวลผลทั้งหมดด้วย AbortController
const ctrl = new AbortController();
readable.pipeTo(writable, { signal: ctrl.signal });
ctrl.abort();ตัวเลือกการส่งข้อมูลต่อ
pipeTo รับ preventClose, preventAbort และ preventCancel เพื่อควบคุมวิธีเผยแพร่ข้อผิดพลาดและการเสร็จสิ้นระหว่างปลายทั้งสอง
readable.pipeTo(writable, { preventClose: true });สายการประมวลผลที่สมบูรณ์
เมื่อนำทุกอย่างมารวมกัน คุณจะดึงข้อมูลไบต์ ถอดรหัส แปลงข้อมูล และเขียนลงปลายทางได้ โดยมีการควบคุมการไหลอัตโนมัติทั้งหมด
const res = await fetch("/data");
await res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(lineSplitter)
.pipeTo(uiSink);ตรวจสอบความเข้าใจ
ทดสอบแรงดันย้อนกลับ
ทบทวน: แรงดันย้อนกลับและการส่งข้อมูลต่อ
คุณได้ทำความรู้จัก WritableStream และ writer รอ ready เพื่อจัดการแรงดันย้อนกลับ เชื่อมต่อสตรีมด้วย pipeTo/pipeThrough ปรับค่า highWaterMark และติดตาม desiredSize รวมถึงยกเลิกสายการประมวลผล บทนี้ทำให้เนื้อหา Streams API ครบถ้วนแล้ว
คำถามที่พบบ่อย
บทเรียน “แรงดันย้อนกลับและการส่งต่อสตรีม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แรงดันย้อนกลับและการส่งต่อสตรีม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แรงดันย้อนกลับและการส่งต่อสตรีม”
จัดการการควบคุมการไหลด้วย pipeTo และ pipeThrough คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “แรงดันย้อนกลับและการส่งต่อสตรีม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สตรีมที่อ่านได้
- การตอบกลับแบบสตรีมจาก fetch
- สตรีมแปลงข้อมูล
- แรงดันย้อนกลับและการส่งต่อสตรีม