การจัดการสถานะกำลังโหลดและข้อผิดพลาด
เพิ่มตัวแปรสถานะกำลังโหลดและข้อผิดพลาดให้คอมโพเนนต์ แสดงตัวหมุนขณะดึงข้อมูล และแสดงข้อความข้อผิดพลาดที่เข้าใจง่ายเมื่อการทำงานล้มเหลว
การจัดการสถานะกำลังโหลดและข้อผิดพลาด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
สามสถานะของข้อมูลแบบอะซิงโครนัส
การทำงานกับข้อมูลแบบอะซิงโครนัสทุกประเภทมีสามสถานะ ได้แก่ กำลังโหลด (คำขอกำลังดำเนินการ) สำเร็จ (ได้รับข้อมูลแล้ว) และ ข้อผิดพลาด (คำขอล้มเหลว) ส่วนติดต่อผู้ใช้ควรจัดการทั้งสามสถานะอย่างชัดเจน
ส่วนติดต่อผู้ใช้ขณะโหลด
ระหว่างกำลังโหลด ให้แสดงวงล้อ โครงร่าง หรือข้อมูลตัวแทน ป้องกันการส่งแบบฟอร์มซ้ำด้วยการปิดใช้งานปุ่มระหว่างกำลังโหลด ผู้ใช้ควรทราบเสมอว่าแอปกำลังทำงานอยู่
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}ส่วนติดต่อผู้ใช้เมื่อเกิดข้อผิดพลาด
แสดงข้อความข้อผิดพลาดที่เป็นมิตรเมื่อคำขอล้มเหลว เพิ่มการดำเนินการสำหรับลองใหม่เพื่อไม่ให้ผู้ใช้ติดอยู่ และ log ข้อผิดพลาดทั้งหมดไว้สำหรับนักพัฒนา
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}กลไกลองใหม่
เพิ่มตัวนับการลองใหม่ในสถานะ และเพิ่มตัวนับนั้นลงในอาร์เรย์การพึ่งพาของผลข้างเคียง เมื่อผู้ใช้คลิกลองใหม่ ตัวนับจะเปลี่ยนแปลงและทำให้ผลข้างเคียงทำงานอีกครั้ง
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>แนวทางปฏิบัติที่ดีสำหรับสถานะกำลังโหลด
1) แสดงสถานะกำลังโหลดทันทีที่เริ่มคำขอ 2) ทำให้สถานะกำลังโหลดกระชับ อย่าตั้งสถานะใหม่หากมีข้อมูลที่แคชไว้ 3) สำหรับการแบ่งหน้า ให้แยกการโหลดครั้งแรกออกจากการโหลดเพิ่มเติม 4) อย่าแสดงวงล้อชั่วครู่ที่น้อยกว่า 100 มิลลิวินาที ให้เพิ่มความล่าช้าหรือแสดงข้อมูลเดิมไว้
การอัปเดตแบบมองโลกในแง่ดี
การอัปเดตแบบมองโลกในแง่ดีคือการอัปเดตส่วนติดต่อผู้ใช้ทันทีก่อนที่เซิร์ฟเวอร์จะยืนยัน จากนั้นจึงย้อนกลับหากคำขอล้มเหลว วิธีนี้ทำให้ผู้ใช้รู้สึกว่าแอปตอบสนองได้ทันที
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}ขอบเขตดักจับข้อผิดพลาดในการแสดงผล
ใช้ขอบเขตดักจับข้อผิดพลาด ซึ่งเป็นองค์ประกอบแบบคลาสที่มี componentDidCatch เพื่อดักจับข้อผิดพลาดที่เกิดขึ้นระหว่างการแสดงผล ขอบเขตเหล่านี้จะแสดงส่วนติดต่อผู้ใช้สำรองแทนที่จะทำให้ทั้งแอปล่ม
การจับคู่ข้อผิดพลาด HTTP
จับคู่รหัสสถานะ HTTP กับข้อความที่เป็นมิตรต่อผู้ใช้ 401 → เปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ 403 → แสดง “ปฏิเสธการเข้าถึง” 404 → “ไม่พบข้อมูล” 429 → “มีคำขอมากเกินไป — โปรดรอ” 500 ขึ้นไป → “เซิร์ฟเวอร์ขัดข้อง — โปรดลองอีกครั้ง”
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer สำหรับสถานะการดึงข้อมูลที่ซับซ้อน
เมื่อสถานะกำลังโหลด ข้อผิดพลาด และข้อมูลมีปฏิสัมพันธ์กัน เช่น การล้างข้อผิดพลาดเมื่อโหลดใหม่ การใช้ตัวลดรูปจะเป็นระเบียบกว่าการเรียก useState หลายครั้ง
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — อนาคต
Suspense ของ React ที่ใช้ร่วมกับเฟรมเวิร์กสำหรับการดึงข้อมูล เช่น React Query, Relay และ Next.js ช่วยให้องค์ประกอบหยุดรอขณะรอข้อมูล องค์ประกอบ Suspense ของแม่จะแสดงส่วนติดต่อผู้ใช้สำรองโดยอัตโนมัติ นี่คือทิศทางที่ React กำลังมุ่งไป
ข้อผิดพลาดเครือข่ายเทียบกับข้อผิดพลาดเซิร์ฟเวอร์
ข้อผิดพลาดเครือข่าย เช่น ไม่มีการเชื่อมต่อหรือ CORS จะถูกส่งออกมาในบล็อก catch ส่วนข้อผิดพลาดเซิร์ฟเวอร์ (4xx, 5xx) จะเสร็จสิ้นตามปกติ คุณต้องตรวจสอบ res.ok เพื่อพบข้อผิดพลาดเหล่านั้น การจัดการข้อผิดพลาดของคุณต้องครอบคลุมทั้งสองประเภท
ตรวจสอบอย่างรวดเร็ว
“การอัปเดตแบบมองโลกในแง่ดี” คืออะไร
สรุป: สถานะกำลังโหลดและข้อผิดพลาด
จัดการสถานะกำลังโหลด สำเร็จ และข้อผิดพลาดเสมอ แสดงส่วนติดต่อผู้ใช้ขณะโหลดที่สื่อความหมาย จับคู่ข้อผิดพลาด HTTP กับข้อความที่เป็นมิตรต่อผู้ใช้ ใช้กลไกลองใหม่ ใช้การอัปเดตแบบมองโลกในแง่ดีเพื่อให้ผู้ใช้รู้สึกว่าได้รับการตอบสนองทันที ใช้ useReducer สำหรับสถานะการดึงข้อมูลที่ต้องประสานกัน และในอนาคต Suspense จะช่วยทำให้รูปแบบนี้ง่ายยิ่งขึ้น
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การจัดการสถานะกำลังโหลดและข้อผิดพลาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดการสถานะกำลังโหลดและข้อผิดพลาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดการสถานะกำลังโหลดและข้อผิดพลาด”
เพิ่มตัวแปรสถานะกำลังโหลดและข้อผิดพลาดให้คอมโพเนนต์ แสดงตัวหมุนขณะดึงข้อมูล และแสดงข้อความข้อผิดพลาดที่เข้าใจง่ายเมื่อการทำงานล้มเหลว คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดการสถานะกำลังโหลดและข้อผิดพลาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน useEffect: dependencies และการทำความสะอาด
- การดึงข้อมูลเมื่อเมานต์
- การจัดการสถานะกำลังโหลดและข้อผิดพลาด
- AbortController สำหรับการทำความสะอาด