5.1 Fetch API
Per eseguire richieste HTTP in JavaScript spesso si usano due librerie: la funzione incorporata fetch e la libreria di terze parti Axios. Entrambe offrono funzionalità potenti e flessibili per interagire con le API e altre risorse web.
Fetch API è un metodo integrato nel browser per eseguire richieste HTTP. Si basa su promises e offre un approccio flessibile e moderno per lavorare con richieste di rete.
Sintassi di una semplice richiesta fetch:
let promise = fetch(url, {method, headers,
body})
Concetti di base di Fetch:
fetch(url, options): metodo principale per eseguire richieste HTTP- Restituisce un promise che si risolve in un oggetto Response
Esempio di una semplice richiesta GET usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Errore di rete: risposta dal server non corretta');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Errore nell\'esecuzione della richiesta: ', error);
});
Esempio di richiesta POST usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Errore nell\'esecuzione della richiesta: ', error);
});
Opzioni di Fetch
Fetch API consente di configurare diversi parametri della richiesta tramite l'oggetto options, come il metodo, le intestazioni, il corpo della richiesta e altri.
const options = {
method: 'GET', // o 'POST', 'PUT', 'DELETE', ecc.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // utilizzato per richieste POST e PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Errore nell\'esecuzione della richiesta: ', error));
5.2 Libreria Axios
Axios è una libreria popolare per eseguire richieste HTTP in JavaScript. Offre un'API più comoda e funzionale rispetto al nativo Fetch API, oltre a supportare molte funzionalità aggiuntive, come la conversione automatica di JSON, la gestione dei timeout, l'interruzione delle richieste e il supporto per i browser più vecchi.
Installazione di Axios
Axios può essere installato tramite npm o aggiunto tramite CDN.
Installazione tramite npm:
npm install axios
Aggiunta in Node.js o utilizzando bundle modulari (ad esempio, Webpack):
// Per CommonJS
const axios = require('axios');
// Per moduli ES6
import axios from 'axios';
Aggiunta tramite CDN nel browser:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Sintassi di una semplice richiesta GET:
let promise = axios.get(url)
Sintassi di una semplice richiesta POST:
let promise = axios.post(url, data, config)
Concetti di base di Axios:
- axios(config): metodo principale per eseguire richieste HTTP
- Accetta un oggetto di configurazione che può includere
url,method,headers,datae altri parametri. - Metodi scorciatoia: Axios offre metodi per ogni metodo HTTP (
axios.get,axios.post,axios.put,axios.delete, ecc.), semplificando l'esecuzione delle richieste corrispondenti. - Promises: tutti i metodi Axios restituiscono un Promise, che si risolve in un oggetto di risposta o viene respinto in caso di errore.
Sintassi di una semplice richiesta GET con gestione della risposta e degli errori:
axios.get(url)
.then(response => {
// Gestione della risposta positiva
})
.catch(error => {
// Gestione dell'errore
});
Sintassi di una semplice richiesta POST con gestione della risposta e degli errori:
axios.post(url, data, config)
.then(response => {
// Gestione della risposta positiva
})
.catch(error => {
// Gestione dell'errore
});
Esempio di una semplice richiesta GET usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Errore nell\'esecuzione della richiesta: ', error);
});
Esempio di richiesta POST usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Errore nell\'esecuzione della richiesta: ', error);
});
5.3 Configurazione di Axios
Impostazioni di Axios
Axios permette di configurare le richieste HTTP utilizzando un oggetto config, che include parametri come url, method, headers e dati (data). Di seguito un esempio di base per configurare una richiesta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // può essere 'get', 'post', 'put', 'delete', ecc.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Intestazione per specificare il tipo di dati
},
// data: JSON.stringify(data) // Usato per richieste POST e PUT
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Errore nell\'esecuzione della richiesta: ', error));
Funzionalità aggiuntive di Axios:
- Parametri di richiesta: si possono passare parametri di richiesta nell'URL.
- Interruzione delle richieste: utilizzando
AbortController. - Timeout: impostazione del tempo di attesa per la richiesta.
Esempio di utilizzo dei parametri di richiesta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // I parametri di richiesta sono passati attraverso l'oggetto params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Errore nell\'esecuzione della richiesta: ', error);
});
5.4 Confronto tra Fetch e Axios
Ora consideriamo Fetch e Axios in confronto su criteri chiave:
1. Semplicità d'uso:
- Fetch: facile da usare per operazioni di base, ma richiede elaborazioni aggiuntive per scenari complessi (ad esempio, conversione JSON, gestione dei timeout).
- Axios: offre un'API più comoda e potente per eseguire richieste complesse.
2. Supporto JSON:
- Fetch: richiede una chiamata esplicita a
response.json()per convertire il corpo della risposta in JSON. - Axios: converte automaticamente le risposte JSON.
3. Timeout:
- Fetch: non ha supporto integrato per i timeout. Per implementare il timeout, occorre usare
AbortControllero wrapper. - Axios: supporta la configurazione dei timeout tramite configurazione.
4. Intercettori:
- Fetch: non supporta intercettori per le richieste e le risposte.
- Axios: permette di utilizzare intercettori per eseguire logiche prima e dopo l'invio della richiesta.
Esempio con intercettori in Axios
Interceptors (intercettori) consentono di eseguire azioni specifiche prima di inviare una richiesta o dopo aver ricevuto una risposta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Aggiunta di un intercettore per le richieste
axios.interceptors.request.use(config => {
console.log('Richiesta inviata al server: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Aggiunta di un intercettore per le risposte
axios.interceptors.response.use(response => {
console.log('Risposta ricevuta dal server: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Esempio di richiesta con intercettori
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Errore nell\'esecuzione della richiesta: ', error));
Richieste parallele usando Axios
Con Axios è facile eseguire richieste parallele e gestire i risultati con Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Errore nell\'esecuzione della richiesta: ', error));
GO TO FULL VERSION