Question 1

เมธอด fetch() คืนค่าอะไรเมื่อถูกเรียกใช้?

Accepted Answer

fetch() คืนค่า Promise ที่ resolve ด้วยอ็อบเจกต์ Response ต่างจาก axios ตรงที่ fetch จะไม่ reject ข้อผิดพลาด HTTP (เช่น 404 หรือ 500) โดยอัตโนมัติ ดังนั้นจึงจำเป็นต้องตรวจสอบ response.ok ก่อนที่จะ parse ข้อมูล วิธีนี้ให้การควบคุมการจัดการข้อผิดพลาดได้มากขึ้น แต่ต้องตรวจสอบสถานะอย่างชัดเจน

Question 2

จะดึงข้อมูล JSON จากอ็อบเจกต์ Response ที่ได้จาก fetch() ได้อย่างไร?

Accepted Answer

อ็อบเจกต์ Response มีเมธอด json() ที่คืนค่า Promise ซึ่ง resolve ด้วยข้อมูลที่ parse แล้ว เมธอดนี้เป็นแบบ asynchronous เพราะอ่าน body ของ response แบบค่อยเป็นค่อยไป สิ่งสำคัญคือต้องตรวจสอบ response.ok ก่อนเรียก json() เพื่อให้แน่ใจว่า request สำเร็จ

Question 3

คุณสมบัติใดของอ็อบเจกต์ Response ที่ใช้ตรวจสอบว่า HTTP request สำเร็จหรือไม่?

Accepted Answer

คุณสมบัติ response.ok จะคืนค่า true หากรหัสสถานะ HTTP อยู่ระหว่าง 200 ถึง 299 ซึ่งบ่งบอกว่า response สำเร็จ คุณสมบัตินี้สำคัญเพราะ fetch() ไม่ reject ข้อผิดพลาด HTTP โดยอัตโนมัติ ต่างจาก axios การตรวจสอบ response.ok ก่อนประมวลผลข้อมูลเป็น best practice เพื่อหลีกเลี่ยงการ parse response ที่เป็นข้อผิดพลาด

การดึงข้อมูลและ API

เมธอด fetch() คืนค่าอะไรเมื่อถูกเรียกใช้?

คำตอบ

จะดึงข้อมูล JSON จากอ็อบเจกต์ Response ที่ได้จาก fetch() ได้อย่างไร?

คำตอบ

คุณสมบัติใดของอ็อบเจกต์ Response ที่ใช้ตรวจสอบว่า HTTP request สำเร็จหรือไม่?

คำตอบ

คีย์เวิร์ดใดที่ช่วยให้รอการ resolve ของ Promise แบบ synchronous ในฟังก์ชัน async?

เมธอดต่อไปนี้ควรถูกเรียกตามลำดับใดเมื่อใช้ fetch(): json(), then(), catch()?

หัวข้อสัมภาษณ์ 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 สำหรับการสัมภาษณ์ครั้งถัดไป