Vue.js / Nuxt.js

Nuxt Data Fetching

useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching

20 mülakat soruları·
Mid-Level
1

What is the main difference between useFetch and useAsyncData in Nuxt?

Cevap

useFetch is a wrapper around useAsyncData and $fetch that simplifies common API calls. It automatically handles URL construction and accepts a URL directly as the first argument, while useAsyncData requires a unique key and a custom fetcher function. Use useFetch for simple API calls, useAsyncData for complex fetching logic.

2

Why is it recommended to always provide a unique key when using useAsyncData?

Cevap

The unique key allows Nuxt to identify and deduplicate requests between server and client during SSR hydration. Without a unique key, data might be unnecessarily re-fetched on the client after server rendering, or cache conflicts could occur. The key also serves for caching and state management.

3

What is the difference between $fetch and useFetch in Nuxt?

Cevap

$fetch is a utility function that performs simple HTTP requests without state management or reactivity, similar to native fetch but with Nuxt enhancements. useFetch is a composable that returns reactive refs (data, pending, error) and handles SSR hydration. Use $fetch for imperative calls in event handlers, useFetch for declarative fetching in components.

4

How to enable lazy fetching with useFetch or useAsyncData?

5

How to handle errors during data fetching with useFetch?

+17 mülakat soruları

Bir sonraki mülakatın için Vue.js / Nuxt.js'de uzmanlaş

Tüm sorulara, flashcards'a, teknik testlere, code review alıştırmalarına ve mülakat simülatörlerine eriş.

Ücretsiz başla