สตรีมข้อมูลด้วย Promise ใน load
ส่งคืน Promise ที่ยังไม่เสร็จสิ้นจาก load เพื่อสตรีมข้อมูลหลัง HTML เริ่มต้น
สตรีมข้อมูลด้วย Promise ใน load เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ใช้ stream
การโหลดแบบส่งข้อมูลผ่าน stream ทำให้หน้าเว็บแสดงผลได้ก่อนที่ข้อมูลช้าจะพร้อมใช้งาน จึงช่วยให้ผู้ใช้รู้สึกว่าระบบทำงานเร็วขึ้น
ส่งคืนพรอมิส
ส่งคืนข้อมูลโดยให้พร็อพเพอร์ตีบางส่วนเป็นพรอมิสที่ยังไม่เสร็จสมบูรณ์
export async function load() {
return {
fast: getFastData(),
slow: getSlowData() // promise, not awaited
};
}รอในมาร์กอัป
ใช้ {#await} ในหน้าเว็บเพื่อจัดการพรอมิสที่ส่งผ่าน stream
{#await data.slow}
<p>Loading...</p>
{:then result}
<p>{result}</p>
{/await}HTML เริ่มต้น
ข้อมูลที่พร้อมเร็วจะแสดงทันที ส่วนข้อมูลที่ช้าจะเติมเข้ามาเมื่อพร้อมใช้งาน
ประสบการณ์ผู้ใช้คล้าย Suspense
แสดงโครงร่างจำลองหรือวงแหวนแสดงการโหลดขณะที่ข้อมูลกำลังถูกส่งผ่าน stream
พร็อพเพอร์ตีหลายรายการที่ส่งผ่าน stream
ส่งพร็อพเพอร์ตีหลายรายการผ่าน stream แยกจากกัน โดยแต่ละรายการจะพร้อมใช้งานตามเวลาของตนเอง
ข้อผิดพลาดใน stream
ใช้ {:catch} ในบล็อก await เพื่อจัดการกรณีที่พรอมิสถูกปฏิเสธ
ต้องใช้เซิร์ฟเวอร์
การโหลดแบบส่งข้อมูลผ่าน stream ทำงานได้เฉพาะเมื่อเปิดใช้ SSR
ไม่มีข้อจำกัดจากอะแดปเตอร์
อะแดปเตอร์ส่วนใหญ่ เช่น node, vercel และ cloudflare รองรับการส่งข้อมูลผ่าน stream
ความปลอดภัยของชนิดข้อมูล
การส่งค่า Promise<T> กลับมาช่วยให้ชนิดข้อมูลในพร็อพข้อมูลถูกต้อง
ควรใช้เมื่อใด
เหมาะกับ API ที่ตอบสนองช้า เนื้อหาที่สร้างโดย AI และคำขอข้อมูลขนาดใหญ่ หรือสิ่งใดก็ตามที่ไม่ควรขัดขวางการแสดงผลครั้งแรก
ตรวจสอบความเข้าใจ
จะเกิดอะไรขึ้นเมื่อคุณส่งคืนพรอมิสที่ยังไม่ได้รอจาก load
ทบทวน
ส่งข้อมูลผ่าน stream โดยส่งคืนพรอมิสที่ยังไม่เสร็จสมบูรณ์จาก load แล้วจัดการพรอมิสนั้นในมาร์กอัปด้วย {#await}
คำถามที่พบบ่อย
บทเรียน “สตรีมข้อมูลด้วย Promise ใน load” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สตรีมข้อมูลด้วย Promise ใน load” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สตรีมข้อมูลด้วย Promise ใน load”
ส่งคืน Promise ที่ยังไม่เสร็จสิ้นจาก load เพื่อสตรีมข้อมูลหลัง HTML เริ่มต้น คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “สตรีมข้อมูลด้วย Promise ใน load” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สตรีมข้อมูลด้วย Promise ใน load
- การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense
- สตรีมจากเซิร์ฟเวอร์ด้วย +server.js
- การไฮเดรตแบบก้าวหน้า