Vue.js / Nuxt.js

Data Fetching in Nuxt

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

20 domande da colloquio·
Mid-Level
1

Qual è la differenza principale tra useFetch e useAsyncData in Nuxt?

Risposta

useFetch è un wrapper attorno a useAsyncData e $fetch che semplifica le chiamate API comuni. Gestisce automaticamente la costruzione dell'URL e accetta direttamente un URL come primo argomento, mentre useAsyncData richiede una chiave univoca e una funzione fetcher personalizzata. Usa useFetch per chiamate API semplici e useAsyncData per logiche di fetching complesse.

2

Perché è consigliato fornire sempre una chiave univoca quando si usa useAsyncData?

Risposta

La chiave univoca consente a Nuxt di identificare e deduplicare le richieste tra server e client durante l'idratazione SSR. Senza una chiave univoca, i dati potrebbero essere nuovamente recuperati inutilmente sul client dopo il rendering del server, oppure potrebbero verificarsi conflitti di caching. La chiave serve anche per il caching e la gestione dello state.

3

Qual è la differenza tra $fetch e useFetch in Nuxt?

Risposta

$fetch è una funzione di utilità che esegue semplici richieste HTTP senza gestione dello state né reattività, simile al fetch nativo ma con miglioramenti di Nuxt. useFetch è un composable che restituisce ref reattive (data, pending, error) e gestisce l'idratazione SSR. Usa $fetch per chiamate imperative negli event handler e useFetch per il fetching dichiarativo nei componenti.

4

Come abilitare il lazy fetching con useFetch o useAsyncData?

5

Come gestire gli errori durante il data fetching con useFetch?

+17 domande da colloquio

Padroneggia Vue.js / Nuxt.js per il tuo prossimo colloquio

Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.

Inizia gratis