Frontend Academy · บทเรียน

useFetch และ useAsyncData

ดึงข้อมูลฝั่งเซิร์ฟเวอร์ด้วย useFetch และ useAsyncData จัดการสถานะกำลังรอและข้อผิดพลาด และทำความเข้าใจวิธีที่ Nuxt ทำไฮเดรตให้ไคลเอนต์

useFetch และ useAsyncData เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การดึงข้อมูลใน Nuxt 3

Nuxt มีคอมโพสเอเบิลหลักสองรายการสำหรับดึงข้อมูล: useFetch ซึ่งอิงตาม URL และเรียกใช้ fetch เบื้องหลัง และ useAsyncData ซึ่งรับฟังก์ชันอะซิงโครนัสใดก็ได้ พร้อมคีย์ที่ไม่ซ้ำกันสำหรับแคชและการป้องกันการดึงข้อมูลซ้ำ

useFetch — วิธีที่รวดเร็ว

ส่ง URL ให้กับคอมโพสเอเบิล Nuxt จะดึงข้อมูลระหว่าง SSR ทำไฮเดรตบนไคลเอนต์ และป้องกันไม่ให้ไคลเอนต์ดึงข้อมูลซ้ำระหว่างไฮเดรต

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

เหตุใดจึงไม่ดึงข้อมูลซ้ำระหว่างไฮเดรต

Nuxt จะแปลงข้อมูลที่ดึงมาเป็นอนุกรมไว้ในข้อมูล HTML ของ SSR เมื่ออยู่บนไคลเอนต์ useFetch จะทำไฮเดรตจากข้อมูลนั้น จึงไม่มีการเรียกเครือข่ายครั้งที่สอง นี่คือการเพิ่มประสิทธิภาพ SSR ที่สำคัญ

useAsyncData — การทำงานแบบอะซิงโครนัสที่ยืดหยุ่น

ใช้เมื่อการดึงข้อมูลไม่ใช่เพียงการเรียก URL อย่างง่าย เช่น การค้นหาฐานข้อมูล ตรรกะที่กำหนดเอง หรือคำขอหลายขั้นตอน

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

คีย์แคชมีความสำคัญ

อาร์กิวเมนต์แรกของ useAsyncData คือคีย์แคชที่ไม่ซ้ำกัน เมื่อคอมโพเนนต์ใช้คีย์เดียวกัน ระบบจะป้องกันการดึงข้อมูลซ้ำและนำผลลัพธ์กลับมาใช้ คีย์ต่างกันหมายถึงการดึงข้อมูลที่แยกจากกัน

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

การรีเฟรชและการโหลดแบบชะลอ

คอมโพสเอเบิลทั้งสองรายการส่งคืน refresh() สำหรับดึงข้อมูลใหม่ และรับ { lazy: true } เพื่อไม่ให้ SSR ต้องรอ ข้อมูลจะโหลดหลังจากแสดงผลหน้าแล้ว

const { data, refresh } = await useFetch('/api/posts');

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

// Or lazy mode:
const { data, pending } = useFetch('/api/posts', { lazy: true });

การเฝ้าดูและ URL แบบรีแอ็กทีฟ

ส่งฟังก์ชันสำหรับ URL ฟังก์ชันนั้นจะเป็นรีแอ็กทีฟ และจะดึงข้อมูลใหม่เมื่อการพึ่งพาเปลี่ยนแปลง

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

ตัวเลือกคำขอ

useFetch รับตัวเลือกเดียวกับ fetch ได้แก่ method, body และ headers รวมถึงตัวเลือกเฉพาะของ Nuxt เช่น default และ transform

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — การดึงข้อมูลโดยสั่งงาน

$fetch คือเครื่องมือดึงข้อมูลสากลของ Nuxt ซึ่งใช้ ofetch อยู่เบื้องหลัง และไม่มีการติดตามไฮเดรตโดยอัตโนมัติ ให้ใช้ในตัวจัดการเหตุการณ์และการเปลี่ยนแปลงข้อมูล

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

การจัดการข้อผิดพลาด

โยนข้อผิดพลาดภายในตัวจัดการการดึงข้อมูลเพื่อส่งต่อข้อผิดพลาดนั้น หน้าเว็บสามารถแสดงหน้าข้อผิดพลาดแบบกำหนดเองด้วย ~/error.vue

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

สิทธิ์และคุกกี้

useFetch จะส่งต่อคุกกี้ระหว่าง SSR โดยอัตโนมัติ ดังนั้นคำขอที่ต้องตรวจสอบสิทธิ์จึงทำงานได้ทั้งบนเซิร์ฟเวอร์และไคลเอนต์โดยไม่ต้องจัดการคุกกี้ด้วยตนเอง

useFetch เทียบกับ useAsyncData — ควรใช้เมื่อใด

useFetch: คำขอแบบอิง URL อย่างง่าย ซึ่งครอบคลุมกรณีส่วนใหญ่ 95% useAsyncData: ตรรกะอะซิงโครนัสแบบกำหนดเอง การประกอบหลายขั้นตอน และแหล่งข้อมูลที่ไม่ใช่ URL เช่น ฐานข้อมูลผ่าน server/utils

ตรวจสอบความเข้าใจ

เหตุใด useFetch ใน Nuxt 3 จึงป้องกันคำขอเครือข่ายซ้ำเมื่อหน้าเว็บทำไฮเดรตบนไคลเอนต์

ทบทวน: useFetch และ useAsyncData

useFetch: เหมาะกับกรณีส่วนใหญ่ 95% ที่อิงตาม URL ส่วน useAsyncData: เหมาะกับตรรกะอะซิงโครนัสแบบกำหนดเองที่มีคีย์แคชไม่ซ้ำกัน ทั้งสองแบบจะไฮเดรตจากเพย์โหลด SSR โดยไม่ส่งคำขอซ้ำ ใช้ refresh() เพื่อดึงข้อมูลใหม่ และใช้ lazy:true เพื่อไม่ให้ SSR รอการทำงาน URL แบบรีแอกทีฟจะทำให้ดึงข้อมูลใหม่โดยอัตโนมัติ ใช้ $fetch สำหรับการเปลี่ยนแปลงข้อมูลแบบสั่งการ error.vue ใช้จัดการข้อผิดพลาด คุกกี้จะถูกส่งต่อโดยอัตโนมัติระหว่าง SSR

คำถามที่พบบ่อย

บทเรียน “useFetch และ useAsyncData” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “useFetch และ useAsyncData” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “useFetch และ useAsyncData”

ดึงข้อมูลฝั่งเซิร์ฟเวอร์ด้วย useFetch และ useAsyncData จัดการสถานะกำลังรอและข้อผิดพลาด และทำความเข้าใจวิธีที่ Nuxt ทำไฮเดรตให้ไคลเอนต์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “useFetch และ useAsyncData” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy