สตรีมที่อ่านได้
รับข้อมูลทีละส่วน
สตรีมที่อ่านได้ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
สตรีมคืออะไร
ส่วนติดต่อการเขียนโปรแกรมสำหรับสตรีมจะประมวลผลข้อมูลทีละส่วนเมื่อข้อมูลมาถึง แทนที่จะโหลดทุกอย่างไว้ในหน่วยความจำ วิธีนี้ช่วยให้จัดการการดาวน์โหลดขนาดใหญ่ วิดีโอ และข้อมูลถ่ายทอดสดได้อย่างมีประสิทธิภาพ
The ReadableStream
ReadableStream คือแหล่งข้อมูลที่คุณอ่านทีละส่วน เบราว์เซอร์จะแสดงสตรีมเหล่านี้ในคำตอบจากการเรียกข้อมูล กลุ่มข้อมูลไฟล์ และแหล่งอื่น ๆ
การสร้างสตรีม
สร้างโดยใช้อ็อบเจ็กต์แหล่งต้นทางพื้นฐาน ซึ่ง start(controller) จะส่งส่วนข้อมูลเข้าคิวและแจ้งเมื่อเสร็จสิ้น
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});การรับ reader
getReader() จะล็อกสตรีมและส่งคืน reader ขณะที่ถูกล็อก จะไม่มีผู้ใช้อื่นสามารถอ่านสตรีมได้
const reader = stream.getReader();การอ่านส่วนข้อมูล
reader.read() จะส่งคืนพรอมิสที่แก้ค่าเป็น { value, done } โดย done จะกลายเป็น true เมื่ออ่านสตรีมจนหมด
const { value, done } = await reader.read();
console.log(value, done);วงรอบการอ่านข้อมูล
วนเรียก read() จนกว่า done จะเป็นค่า true เพื่ออ่านสตรีมทั้งหมด
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}การปลดล็อก
เรียก reader.releaseLock() เพื่อปลดล็อกสตรีม ทำให้ reader อื่นเข้ามารับช่วงต่อได้
reader.releaseLock();เมธอด pull
แหล่งต้นทางพื้นฐานสามารถกำหนด pull(controller) ซึ่งจะถูกเรียกเมื่อผู้ใช้ข้อมูลต้องการข้อมูลเพิ่ม ทำให้สร้างข้อมูลแบบเลื่อนเวลาและตามความต้องการได้
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});การวนซ้ำแบบอะซิงโครนัส
ในสภาพแวดล้อมสมัยใหม่ ReadableStream รองรับการวนซ้ำแบบอะซิงโครนัส ทำให้คุณใช้การวนซ้ำแบบรอผลแทนวงรอบที่เขียนเองได้
for await (const chunk of stream) {
console.log(chunk);
}การยกเลิกสตรีม
reader.cancel(reason) จะหยุดสตรีมก่อนกำหนดและปล่อยทรัพยากร ซึ่งสำคัญเมื่อต้องยกเลิกการดาวน์โหลดขนาดใหญ่
await reader.cancel("user navigated away");Tee: การแยกสตรีม
tee() จะส่งคืนสตรีมสองสาย โดยแต่ละสายได้รับ copy ของทุกส่วนข้อมูล วิธีนี้มีประโยชน์เมื่อจำเป็นต้องอ่านข้อมูลสองครั้ง เช่น เพื่อเก็บไว้และแสดงผล
const [a, b] = stream.tee();
// read a and b independentlyตรวจสอบสั้น ๆ
ทดสอบสตรีมแบบอ่านได้
สรุป: สตรีมแบบอ่านได้
คุณสร้าง ReadableStream รับ reader อ่านส่วนข้อมูลด้วย read() ในวงรอบ ปลดล็อก ใช้ pull สำหรับข้อมูลแบบเลื่อนเวลา วนซ้ำแบบรอผล และแยกสตรีมด้วย tee() ขั้นต่อไปคือการสตรีมคำตอบจากการเรียกข้อมูล
คำถามที่พบบ่อย
บทเรียน “สตรีมที่อ่านได้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สตรีมที่อ่านได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สตรีมที่อ่านได้”
รับข้อมูลทีละส่วน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “สตรีมที่อ่านได้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ