0Pricing
Vue Academy · บทเรียน

การดึงข้อมูล: useFetch และ useAsyncData

useFetch(), useAsyncData(), การดึงข้อมูลฝั่งเซิร์ฟเวอร์เทียบกับฝั่งไคลเอ็นต์ refresh() และสถานะกำลังรอ

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

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

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

พื้นฐาน useFetch

useFetch ห่อหุ้มการดึงข้อมูลจาก URL โดยส่งคืนค่า data, pending และ error แบบรีแอ็กทีฟ ซึ่งคุณสามารถใช้ในแม่แบบได้โดยตรง

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

การแสดงสถานะกำลังโหลดและข้อผิดพลาด

ใช้ pending สำหรับสถานะกำลังโหลด และใช้ error สำหรับความล้มเหลว ส่วน data จะเก็บ JSON ที่แยกวิเคราะห์แล้ว

<template>
  <p v-if="pending">Loading...</p>
  <p v-else-if="error">Failed to load</p>
  <ul v-else>
    <li v-for="p in data" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

useAsyncData สำหรับตรรกะแบบกำหนดเอง

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

const { data } = await useAsyncData('posts', () => {
  return $fetch('/api/posts')
})

เหตุใดคีย์จึงสำคัญ

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

useFetch คือรูปแบบย่อ

เบื้องหลังแล้ว useFetch(url) แทบจะเหมือนกับ useAsyncData ที่มีคีย์สร้างขึ้นโดยอัตโนมัติและฟังก์ชันดึงข้อมูล $fetch(url) ใช้ useFetch กับ URL แบบง่าย และใช้ useAsyncData กับฟังก์ชันดึงข้อมูลแบบกำหนดเอง

ทำงานเฉพาะฝั่งไคลเอนต์ด้วย server:false

ตั้งค่า server: false เพื่อข้ามการดึงข้อมูลระหว่าง SSR และทำงานเฉพาะฝั่งไคลเอนต์ ซึ่งมีประโยชน์สำหรับข้อมูลเฉพาะผู้ใช้ที่ไม่ควรบล็อกการเรนเดอร์ของเซิร์ฟเวอร์

const { data } = await useFetch('/api/me', {
  server: false
})

การดึงข้อมูลแบบขี้เกียจที่ไม่บล็อก

โดยค่าเริ่มต้น await จะบล็อกการนำทางจนกว่าข้อมูลจะมาถึง ตัวเลือก lazy หรือ useLazyFetch ช่วยให้หน้าแสดงผลทันที แล้วเติมข้อมูลเมื่อการทำงานเสร็จสิ้น

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

การดึงข้อมูลใหม่ด้วย refresh

คอมโพสิเบิลจะคืนฟังก์ชัน refresh สำหรับเรียกการดึงข้อมูลใหม่ตามต้องการ เช่น หลังการเปลี่ยนแปลงข้อมูลหรือการคลิกปุ่ม

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

พารามิเตอร์คำขอแบบตอบสนอง

ส่ง query หรือตัวเลือกแบบตอบสนอง เมื่อ ref ที่เฝ้าดูการเปลี่ยนแปลงมีค่าเปลี่ยน การดึงข้อมูลจะทำงานอีกครั้งโดยอัตโนมัติ ผูก watch เพื่อดึงข้อมูลใหม่เมื่อการพึ่งพาเปลี่ยนแปลง

const page = ref(1)
const { data } = await useFetch('/api/posts', {
  query: { page },
  watch: [page]
})

การแปลงการตอบกลับ

ตัวเลือก transform จะปรับรูปแบบการตอบกลับใหม่ก่อนส่งต่อไปยัง data ซึ่งสะดวกสำหรับเลือกเฉพาะฟิลด์ที่ต้องการและลดขนาดข้อมูลที่ส่งไปยังไคลเอนต์

const { data } = await useFetch('/api/user', {
  transform: (u) => ({ name: u.name, id: u.id })
})

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

ทดสอบความรู้ของคุณเกี่ยวกับการดึงข้อมูลใน Nuxt

สรุป

คุณได้เรียนรู้การดึงข้อมูลใน Nuxt:

  • useFetch ส่งคืนข้อมูลแบบตอบสนอง สถานะกำลังโหลด และข้อผิดพลาด
  • useAsyncData รับคีย์พร้อมฟังก์ชันดึงข้อมูลสำหรับตรรกะแบบกำหนดเอง
  • server:false ทำงานเฉพาะฝั่งไคลเอนต์ ส่วน lazy ทำให้การดึงข้อมูลไม่บล็อกการทำงาน
  • refresh() ดึงข้อมูลใหม่ ส่วน watch จะทำงานอีกครั้งเมื่อการพึ่งพาเปลี่ยนแปลง

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

บทเรียน “การดึงข้อมูล: useFetch และ useAsyncData” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การดึงข้อมูล: useFetch และ useAsyncData”

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

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

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

บทเรียน “การดึงข้อมูล: useFetch และ useAsyncData” ใช้เวลานานแค่ไหน

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

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

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

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

  1. โครงสร้างโปรเจกต์ Nuxt 3 และการกำหนดเส้นทางจากไฟล์
  2. การดึงข้อมูล: useFetch และ useAsyncData
  3. เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt
  4. โหมด SSR เทียบกับ SSG เทียบกับ SPA
← กลับไปที่ Vue Academy