การดึงข้อมูลและ API
fetch API, axios, async/await, การจัดการข้อผิดพลาด, สถานะการโหลด, abort controllers
1เมธอด fetch() คืนค่าอะไรเมื่อถูกเรียกใช้?
เมธอด fetch() คืนค่าอะไรเมื่อถูกเรียกใช้?
คำตอบ
fetch() คืนค่า Promise ที่ resolve ด้วยอ็อบเจกต์ Response ต่างจาก axios ตรงที่ fetch จะไม่ reject ข้อผิดพลาด HTTP (เช่น 404 หรือ 500) โดยอัตโนมัติ ดังนั้นจึงจำเป็นต้องตรวจสอบ response.ok ก่อนที่จะ parse ข้อมูล วิธีนี้ให้การควบคุมการจัดการข้อผิดพลาดได้มากขึ้น แต่ต้องตรวจสอบสถานะอย่างชัดเจน
2จะดึงข้อมูล JSON จากอ็อบเจกต์ Response ที่ได้จาก fetch() ได้อย่างไร?
จะดึงข้อมูล JSON จากอ็อบเจกต์ Response ที่ได้จาก fetch() ได้อย่างไร?
คำตอบ
อ็อบเจกต์ Response มีเมธอด json() ที่คืนค่า Promise ซึ่ง resolve ด้วยข้อมูลที่ parse แล้ว เมธอดนี้เป็นแบบ asynchronous เพราะอ่าน body ของ response แบบค่อยเป็นค่อยไป สิ่งสำคัญคือต้องตรวจสอบ response.ok ก่อนเรียก json() เพื่อให้แน่ใจว่า request สำเร็จ
3คุณสมบัติใดของอ็อบเจกต์ Response ที่ใช้ตรวจสอบว่า HTTP request สำเร็จหรือไม่?
คุณสมบัติใดของอ็อบเจกต์ Response ที่ใช้ตรวจสอบว่า HTTP request สำเร็จหรือไม่?
คำตอบ
คุณสมบัติ response.ok จะคืนค่า true หากรหัสสถานะ HTTP อยู่ระหว่าง 200 ถึง 299 ซึ่งบ่งบอกว่า response สำเร็จ คุณสมบัตินี้สำคัญเพราะ fetch() ไม่ reject ข้อผิดพลาด HTTP โดยอัตโนมัติ ต่างจาก axios การตรวจสอบ response.ok ก่อนประมวลผลข้อมูลเป็น best practice เพื่อหลีกเลี่ยงการ parse response ที่เป็นข้อผิดพลาด
คีย์เวิร์ดใดที่ช่วยให้รอการ resolve ของ Promise แบบ synchronous ในฟังก์ชัน async?
เมธอดต่อไปนี้ควรถูกเรียกตามลำดับใดเมื่อใช้ fetch(): json(), then(), catch()?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี