# การดึงข้อมูลและ API (React / Next.js)

> fetch API, axios, async/await, การจัดการข้อผิดพลาด, สถานะการโหลด, abort controllers

- 20 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

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

**คำตอบ**

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

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

**คำตอบ**

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

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

**คำตอบ**

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

## มีอีก 17 คำถาม

- คีย์เวิร์ดใดที่ช่วยให้รอการ resolve ของ Promise แบบ synchronous ในฟังก์ชัน async?
- เมธอดต่อไปนี้ควรถูกเรียกตามลำดับใดเมื่อใช้ fetch(): json(), then(), catch()?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api