Sử dụng useFetch, useAsyncData và useLazyFetch

Làm việc với dữ liệu từ API là một phần quan trọng trong mọi ứng dụng web. Nuxt 3 cung cấp một bộ hook mạnh mẽ giúp gọi API dễ dàng và tối ưu cho cả SSR lẫn CSR. Trong bài học này, bạn sẽ được làm quen với 3 hook chính: useFetch, useAsyncData, và useLazyFetch. Qua đó, bạn sẽ hiểu được sự khác biệt giữa chúng, cũng như biết cách truyền params và headers khi gọi dữ liệu từ một API mẫu.

Sử dụng useFetch, useAsyncData và useLazyFetch

1. Giới thiệu 3 hook phổ biến trong Nuxt 3

Nuxt hỗ trợ lấy dữ liệu dễ dàng thông qua các composable sau:

2. Sự khác biệt về thời điểm và hoàn cảnh sử dụng

• useFetch():

  • Dễ dùng nhất, phù hợp với các request đơn giản.
  • Hỗ trợ SSR và client-side.
  • Tự động gọi khi component được mount.

• useAsyncData():

  • Linh hoạt hơn, có thể kết hợp với hàm async bất kỳ.
  • Dùng khi bạn muốn kiểm soát logic gọi API chi tiết hơn.

• useLazyFetch():

  • Không gọi API ngay lập tức, chỉ gọi khi cần (ví dụ khi người dùng cuộn tới).
  • Hữu ích cho tối ưu hiệu suất hoặc lazy load nội dung.

3. Thực hành: Gọi API từ JSONPlaceholder

Giả sử ta muốn lấy danh sách bài viết từ API mẫu:

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

<template>
  <div v-if="pending">Đang tải...</div>
  <div v-else-if="error">Lỗi: {{ error.message }}</div>
  <ul>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

4. Truyền params và headers khi gọi API

Bạn có thể truyền query params, headers dễ dàng như sau:

const { data } = await useFetch('https://jsonplaceholder.typicode.com/posts', {
  params: { _limit: 5 },
  headers: { 'Authorization': 'Bearer fake-token' }
})

Hoặc dùng với useAsyncData:

const { data } = await useAsyncData('posts', async () => {
  const res = await $fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')
  return res
})

Dùng useLazyFetch:

const { data, refresh } = await useLazyFetch('https://jsonplaceholder.typicode.com/posts')

// Có thể gọi refresh() thủ công khi cần

Kết luận

Qua bài học này, bạn đã nắm được 3 hook mạnh mẽ mà Nuxt cung cấp để xử lý dữ liệu từ API: useFetch, useAsyncData, và useLazyFetch. Mỗi hook có ưu điểm riêng, phù hợp với những tình huống cụ thể trong dự án. Bạn cũng đã thực hành gọi dữ liệu từ API giả lập, truyền tham số và headers, sẵn sàng để xử lý dữ liệu động từ backend trong các phần tiếp theo.