BÀI 8: GỌI API VỚI useFetch() & useAsyncData() TRONG NUXT

Chúng ta tiếp tục với Bài 8 – Gọi API trong Nuxt bằng useFetch() và useAsyncData(). Đây là một phần quan trọng để làm ứng dụng có dữ liệu động, và tận dụng được sức mạnh SSR/SSG của Nuxt.

---

1. Giới thiệu

Nuxt cung cấp sẵn 2 hooks đặc biệt để gọi dữ liệu:

Hook	Dùng khi nào	Render
useFetch()	Gọi API đơn giản (GET)	SSR + CSR
useAsyncData()	Gọi linh hoạt (GET, POST…)	SSR + CSR

Cả 2 đều có khả năng gọi trên server khi trang được render, giúp SEO tốt hơn.

---

2. Dùng useFetch() – ví dụ đơn giản

Trong pages/posts.vue:

📋 Copy<script setup>
const { data, pending, error } = await useFetch('https://jsonplaceholder.typicode.com/posts')
</script>

<template>
  <div>
    <h1>Danh sách bài viết</h1>
    <div v-if="pending">Đang tải...</div>
    <div v-else-if="error">Lỗi khi tải dữ liệu</div>
    <ul>
      <li v-for="post in data" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

---

3. Dùng useAsyncData() – cấu hình nâng cao hơn

📋 Copy<script setup>
const { data, pending } = await useAsyncData('posts', () =>
  $fetch('https://jsonplaceholder.typicode.com/posts')
)
</script>

• posts là key để cache
• $fetch() là wrapper của ohmyfetch (hỗ trợ SSR)
• Hữu ích khi cần tên định danh, revalidate, transform, v.v.

---

4. Gọi API từ server nội bộ (backend riêng)

Giả sử bạn có API ở http://localhost:3001/api/users, bạn nên dùng biến môi trường:

nuxt.config.ts

📋 Copyexport default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: 'http://localhost:3001/api'
    }
  }
})

Trong page:

📋 Copy<script setup>
const config = useRuntimeConfig()
const { data } = await useFetch(`${config.public.apiBase}/users`)
</script>

---

5. Gọi POST hoặc PUT?

useFetch() chủ yếu cho GET, nếu cần POST thì dùng $fetch() hoặc useAsyncData():

📋 Copy<script setup>
const { data } = await useAsyncData(() =>
  $fetch('https://api.com/create', {
    method: 'POST',
    body: { name: 'John' }
  })
)
</script>

---

6. Kết hợp với composables (tái sử dụng fetch)

Tạo file composables/usePosts.ts:

📋 Copyexport const usePosts = () => {
  return useFetch('https://jsonplaceholder.typicode.com/posts')
}

→ Trong bất kỳ page nào:

📋 Copyconst { data } = await usePosts()

---

7. So sánh nhanh

Thuộc tính	useFetch()	useAsyncData()
Ngắn gọn	Có	Không
Có thể tái sử dụng key	Không	Có
Dễ dùng cho GET	Có	Có
Dùng POST / PUT	Không	Có
Cache control	Trung bình	Mạnh
Custom transform	Không	Có

---

Bạn đã học được

• Gọi API từ URL ngoài hoặc backend riêng
• Hiển thị loading / error / data
• Biết khi nào dùng useFetch() hay useAsyncData()
• Sử dụng useRuntimeConfig() cho biến môi trường
• Tạo composables để tái sử dụng logic fetch

---

Bài tập mở rộng

1. Tạo page /users → gọi API https://reqres.in/api/users
2. Tạo composables/useUsers.ts để gọi lại ở nhiều trang
3. Dùng loading & error để UX tốt hơn