Integrazione delle API nelle Applicazioni JavaScript
Quando si lavora con le API, i metodi HTTP più comuni sono GET e POST:
- GET: Utilizzato per recuperare dati da un server;
- POST: Utilizzato per inviare dati a un server, tipicamente durante l'invio di moduli o dati JSON.
Esempio di richiesta GET
Una richiesta GET recupera dati da un server senza modificare alcuna risorsa.
index.html
index.js
La funzione fetchPost utilizza il metodo fetch() per inviare una richiesta a un endpoint specificato (/posts/1). Una volta ricevuta la risposta, i dati vengono analizzati come JSON e il titolo del post viene estratto e visualizzato nel paragrafo HTML.
Esempio di richiesta POST
Una richiesta POST invia dati al server, spesso utilizzata per creare nuove risorse o inviare dati di un modulo.
index.html
index.js
La funzione sendPostRequest effettua una richiesta all'endpoint specificato (/posts) con il method impostato su 'POST'. Gli header includono 'Content-Type': 'application/json' per indicare che vengono inviati dati in formato JSON. Il body contiene dati formattati in JSON con i dettagli per un nuovo post, come title, body e userId. Dopo la richiesta, la risposta del server viene analizzata come JSON e il titolo del post creato viene visualizzato nell'HTML.
Invio di header e gestione di diversi metodi HTTP (GET, POST, PUT, DELETE)
I diversi metodi HTTP hanno scopi differenti. Oltre a GET e POST, i metodi comuni includono:
- PUT: Utilizzato per aggiornare una risorsa esistente;
- DELETE: Utilizzato per rimuovere una risorsa dal server.
È possibile inviare header con qualsiasi metodo HTTP per fornire informazioni aggiuntive, come token di autenticazione o tipo di contenuto.
Esempio di richiesta PUT: aggiornamento dei dati
index.html
index.js
La funzione updatePost invia una richiesta PUT all'endpoint specificato (/posts/1) per aggiornare un post esistente. La richiesta include method: 'PUT' per specificare l'azione di aggiornamento e gli headers sono impostati per includere 'Content-Type': 'application/json', indicando il formato JSON. Il body contiene dati formattati in JSON, inclusi un id, title aggiornato, body e userId. Una volta ricevuta la risposta, questa viene analizzata come JSON e il titolo aggiornato viene visualizzato nell'HTML.
Esempio di richiesta DELETE: Rimozione dei dati
index.html
index.js
La funzione deletePost invia una richiesta DELETE a un endpoint specificato (/posts/1) per eliminare un post specifico. L'opzione method: 'DELETE' specifica l'azione. Dopo la richiesta, lo stato della risposta viene verificato con response.ok: se ha successo, un messaggio di conferma ("Post eliminato con successo.") viene visualizzato nell'HTML. Se l'eliminazione fallisce, viene invece mostrato un messaggio di errore.
Utilizzo dei parametri di query nelle richieste API
I parametri di query consentono di inviare informazioni aggiuntive nell'URL, come filtrare i dati, ordinare i risultati o specificare i numeri di pagina nelle risposte paginati.
Richiesta GET con parametri di query
index.html
index.js
La funzione fetchPostsByUser invia una richiesta a un endpoint API con un parametro di query (userId=1), che filtra i post mostrando solo quelli appartenenti all'utente specificato. Il userId viene aggiunto direttamente all'URL come parametro di query. Dopo aver ricevuto i dati filtrati, la funzione visualizza nel codice HTML il numero di post trovati per quell'utente.
1. Quale metodo HTTP utilizzeresti per recuperare dati da un server senza modificare alcuna risorsa?
2. Quale delle seguenti opzioni conferma una richiesta DELETE avvenuta con successo?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between GET and POST requests in more detail?
How do I use headers with different HTTP methods?
Can you provide examples of using query parameters in API requests?
Awesome!
Completion rate improved to 2.22Integrazione delle API nelle Applicazioni JavaScript
Scorri per mostrare il menu
Quando si lavora con le API, i metodi HTTP più comuni sono GET e POST:
- GET: Utilizzato per recuperare dati da un server;
- POST: Utilizzato per inviare dati a un server, tipicamente durante l'invio di moduli o dati JSON.
Esempio di richiesta GET
Una richiesta GET recupera dati da un server senza modificare alcuna risorsa.
index.html
index.js
La funzione fetchPost utilizza il metodo fetch() per inviare una richiesta a un endpoint specificato (/posts/1). Una volta ricevuta la risposta, i dati vengono analizzati come JSON e il titolo del post viene estratto e visualizzato nel paragrafo HTML.
Esempio di richiesta POST
Una richiesta POST invia dati al server, spesso utilizzata per creare nuove risorse o inviare dati di un modulo.
index.html
index.js
La funzione sendPostRequest effettua una richiesta all'endpoint specificato (/posts) con il method impostato su 'POST'. Gli header includono 'Content-Type': 'application/json' per indicare che vengono inviati dati in formato JSON. Il body contiene dati formattati in JSON con i dettagli per un nuovo post, come title, body e userId. Dopo la richiesta, la risposta del server viene analizzata come JSON e il titolo del post creato viene visualizzato nell'HTML.
Invio di header e gestione di diversi metodi HTTP (GET, POST, PUT, DELETE)
I diversi metodi HTTP hanno scopi differenti. Oltre a GET e POST, i metodi comuni includono:
- PUT: Utilizzato per aggiornare una risorsa esistente;
- DELETE: Utilizzato per rimuovere una risorsa dal server.
È possibile inviare header con qualsiasi metodo HTTP per fornire informazioni aggiuntive, come token di autenticazione o tipo di contenuto.
Esempio di richiesta PUT: aggiornamento dei dati
index.html
index.js
La funzione updatePost invia una richiesta PUT all'endpoint specificato (/posts/1) per aggiornare un post esistente. La richiesta include method: 'PUT' per specificare l'azione di aggiornamento e gli headers sono impostati per includere 'Content-Type': 'application/json', indicando il formato JSON. Il body contiene dati formattati in JSON, inclusi un id, title aggiornato, body e userId. Una volta ricevuta la risposta, questa viene analizzata come JSON e il titolo aggiornato viene visualizzato nell'HTML.
Esempio di richiesta DELETE: Rimozione dei dati
index.html
index.js
La funzione deletePost invia una richiesta DELETE a un endpoint specificato (/posts/1) per eliminare un post specifico. L'opzione method: 'DELETE' specifica l'azione. Dopo la richiesta, lo stato della risposta viene verificato con response.ok: se ha successo, un messaggio di conferma ("Post eliminato con successo.") viene visualizzato nell'HTML. Se l'eliminazione fallisce, viene invece mostrato un messaggio di errore.
Utilizzo dei parametri di query nelle richieste API
I parametri di query consentono di inviare informazioni aggiuntive nell'URL, come filtrare i dati, ordinare i risultati o specificare i numeri di pagina nelle risposte paginati.
Richiesta GET con parametri di query
index.html
index.js
La funzione fetchPostsByUser invia una richiesta a un endpoint API con un parametro di query (userId=1), che filtra i post mostrando solo quelli appartenenti all'utente specificato. Il userId viene aggiunto direttamente all'URL come parametro di query. Dopo aver ricevuto i dati filtrati, la funzione visualizza nel codice HTML il numero di post trovati per quell'utente.
1. Quale metodo HTTP utilizzeresti per recuperare dati da un server senza modificare alcuna risorsa?
2. Quale delle seguenti opzioni conferma una richiesta DELETE avvenuta con successo?
Grazie per i tuoi commenti!
