ฟังก์ชันโหลด +page.js
ส่งออกฟังก์ชันโหลดเพื่อดึงข้อมูลหรือคำนวณข้อมูลก่อนแสดงหน้า
ฟังก์ชันโหลด +page.js เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ต้องใช้ฟังก์ชันโหลด
SvelteKit จำเป็นต้องรู้ว่าหน้าของคุณต้องใช้ข้อมูลใด เพื่อดึงข้อมูลก่อนแสดงผล ฟังก์ชันโหลดจะทำหน้าที่จัดเตรียมข้อมูลนั้น
ตำแหน่งไฟล์
สร้าง +page.js ถัดจาก +page.svelte ในโฟลเดอร์เดียวกัน
ส่งออก load
ส่งออกฟังก์ชันชื่อ load
export async function load({ params, fetch }) {
const res = await fetch("/api/items");
return { items: await res.json() };
}รองรับแบบอะซิงโครนัส
ฟังก์ชันโหลดสามารถเป็นแบบอะซิงโครนัสได้ SvelteKit จะรอฟังก์ชันเหล่านี้ก่อนแสดงผล
ข้อมูลที่ส่งคืน
สิ่งที่คุณส่งคืนจะถูกส่งให้หน้าในรูปพร็อพ data
ใช้ fetch
ใช้ fetch ที่ส่งให้ฟังก์ชันโหลด โดยจะจัดการ SSR และข้อมูลรับรองให้ถูกต้อง
การเข้าถึงพารามิเตอร์
พารามิเตอร์ของเส้นทางแบบไดนามิกอยู่ใน params
export function load({ params }) { return { slug: params.slug }; }ทำงานฝั่งเซิร์ฟเวอร์ก่อน
สำหรับคำขอเริ่มต้น ฟังก์ชันโหลดจะทำงานบนเซิร์ฟเวอร์ ส่วนการนำทางครั้งถัดไปจะทำงานบนไคลเอนต์
ใช้ได้ทั้งสองฝั่งเทียบกับเฉพาะเซิร์ฟเวอร์
+page.js ทำงานได้ทั้งสองฝั่ง ส่วน +page.server.js ทำงานเฉพาะบนเซิร์ฟเวอร์
การแคช
ใช้ส่วนหัว HTTP และแคชของแพลตฟอร์มเพื่อให้ฟังก์ชันโหลดทำงานได้อย่างมีประสิทธิภาพ
การสตรีม
ส่งคืนพรอมิสในคุณสมบัติที่ซ้อนกัน เพื่อสตรีมข้อมูลโดยไม่บล็อก HTML เริ่มต้น
ตรวจสอบความเข้าใจ
ฟังก์ชันโหลดส่งคืนอะไร
สรุปทบทวน
ส่งออก load จาก +page.js เพื่อดึงข้อมูลหรือคำนวณข้อมูล ค่าที่ส่งคืนจะกลายเป็นพร็อพข้อมูลของหน้า
คำถามที่พบบ่อย
บทเรียน “ฟังก์ชันโหลด +page.js” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชันโหลด +page.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันโหลด +page.js”
ส่งออกฟังก์ชันโหลดเพื่อดึงข้อมูลหรือคำนวณข้อมูลก่อนแสดงหน้า คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟังก์ชันโหลด +page.js” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟังก์ชันโหลด +page.js
- การส่งคืนข้อมูลและการใช้ $page.data
- การจัดการข้อผิดพลาดใน load
- +page.server.js สำหรับตรรกะเฉพาะเซิร์ฟเวอร์