Effettuare richieste GET
Recuperi i dati e analizzi le risposte JSON.
Effettuare richieste GET è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa fa fetch
La Fetch API esegue richieste HTTP dal browser e restituisce una Promise. È il sostituto moderno della vecchia XMLHttpRequest.
Una GET di base
Chiami fetch(url) con un URL. Per impostazione predefinita usa il metodo GET e si risolve con un oggetto Response.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});L'oggetto Response
Il valore risolto è una Response, non i dati stessi. Contiene lo stato, gli header e i metodi per leggere il corpo. È necessario chiamare un metodo del corpo per ottenere il contenuto.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});Analizzare JSON
La maggior parte delle API restituisce JSON. Chiami response.json(), che a sua volta restituisce una Promise che si risolve nell'oggetto analizzato.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Perché ci sono due Promise
La prima Promise si risolve quando arrivano gli header; la seconda (.json()) si risolve quando l'intero corpo è stato scaricato e analizzato. Ecco perché si concatenano due chiamate a .then().
Usare async/await
La maggior parte del codice usa async/await per una migliore leggibilità. Ogni await sospende l'esecuzione finché la relativa Promise non si risolve.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}Altri metodi di lettura del corpo
Oltre a json(), una Response può essere letta come text(), blob() (binario), arrayBuffer() o formData(). Scelga in base a ciò che restituisce il server.
const response = await fetch(url);
const html = await response.text(); // raw stringIl corpo viene letto una sola volta
Il corpo di una risposta è uno stream che può essere consumato una sola volta. Chiamare json() e poi text() sulla stessa risposta genera un errore. Usi response.clone() se ha davvero bisogno di entrambi.
Parametri di query
Costruisca le stringhe di query in modo sicuro con URLSearchParams invece di concatenarle manualmente. Questo oggetto codifica automaticamente i caratteri speciali.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);Inviare gli header
Passi un secondo argomento contenente le opzioni. Per una GET, spesso si imposta un header Accept o un token di autenticazione.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Restituire la Promise
Racchiuda la logica di fetch in una funzione che restituisce la Promise, così i chiamanti possono attenderla. In questo modo il caricamento dei dati può essere riutilizzato in tutta l'app.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}Verifica rapida
Richieste GET con fetch.
Riepilogo
fetch(url) restituisce una Promise per una Response. Legga il corpo con json(), text() o blob() (una sola volta). Usi async/await per maggiore chiarezza, URLSearchParams per le stringhe di query e un oggetto di opzioni per gli header. Racchiuda il tutto in funzioni che restituiscono la Promise, così il codice può essere riutilizzato.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «Effettuare richieste GET» è gratuita?
Sì — il testo completo di «Effettuare richieste GET» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Effettuare richieste GET»?
Recuperi i dati e analizzi le risposte JSON. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Effettuare richieste GET»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Effettuare richieste GET
- POST e invio dei dati
- Gestire errori e codici di stato
- Interrompere le richieste con AbortController