Fetch/XMLHttpRequest in TypeScript

Questo articolo spiega Fetch/XMLHttpRequest in TypeScript.

Puoi imparare come utilizzare l'API Fetch e XMLHttpRequest, e le loro differenze.

YouTube Video

Fetch/XMLHttpRequest in TypeScript

In TypeScript, le richieste HTTP vengono principalmente effettuate utilizzando due API: Fetch API e XMLHttpRequest. Utilizzando TypeScript, è possibile introdurre il controllo dei tipi per richieste e risposte durante la comunicazione asincrona con queste API, permettendo di scrivere codice più sicuro. Di seguito, introdurremo come utilizzare ciascuna di esse.

Fetch API

La Fetch API è un'API basata su Promise utilizzata per eseguire comunicazioni asincrone (richieste HTTP) in modo semplice. In TypeScript, è possibile effettuare richieste utilizzando il metodo fetch e gestire le risposte in modo sicuro rispetto ai tipi.

Uso di base

Di seguito un esempio di base che utilizza una richiesta GET.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Questo codice invia una richiesta GET all'URL specificato, analizza la risposta ricevuta come JSON e la stampa nella console.

Gestione dei dati sicura rispetto ai tipi in TypeScript

Poiché la risposta dal metodo fetch ha un tipo non chiaro, è possibile sfruttare il controllo dei tipi di TypeScript definendo esplicitamente il tipo di risposta.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Questo codice applica il tipo Post ai dati recuperati con fetch, elabora la risposta in modo type-safe e stampa il titolo di ogni post nella console.

Esempio di richiesta POST

Quando si inviano dati al server, utilizzare il metodo POST. Per inviare JSON nel corpo della richiesta, specificare headers e body.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Questo codice invia dati in formato JSON al server tramite una richiesta POST, riceve la risposta come JSON e la stampa nella console.

Fetch con funzioni asincrone (async/await)

Utilizzando async/await in TypeScript, è possibile scrivere processi asincroni in modo più semplice.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Questo codice recupera asincronamente i dati dei post usando la sintassi async/await, elabora la risposta come tipo Post[] e la stampa nella console.

XMLHttpRequest

XMLHttpRequest è un'API più datata ed è in qualche modo più complessa rispetto alla Fetch API, ma può essere utilizzata quando è necessaria la compatibilità con i browser o un controllo più avanzato.

Uso di base di XMLHttpRequest

Di seguito un esempio che utilizza una richiesta GET.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Questo codice invia una richiesta GET all'URL specificato usando XMLHttpRequest, analizza la risposta come JSON e la stampa nella console.

Esempio di richiesta POST

Quando si inviano dati al server, specificare POST nel metodo open e inviare i dati con send.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Questo codice invia dati in formato JSON al server tramite una richiesta POST usando XMLHttpRequest e stampa nella console la risposta che contiene i dati creati.

Gestione degli errori con XMLHttpRequest

È possibile gestire gli errori delle richieste utilizzando l'evento onerror.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Questo codice esegue una richiesta GET con XMLHttpRequest, gestisce gli errori di richiesta con onerror e registra correttamente la risposta sia in caso di successo che di errore.

Confronto tra Fetch API e XMLHttpRequest

Riepilogo

In TypeScript, puoi scrivere richieste asincrone in modo conciso e con codice sicuro usando l'API Fetch. D'altra parte, XMLHttpRequest è un'API più datata ma può ancora essere utilizzata in alcune situazioni. In generale, è consigliato utilizzare l'API Fetch, semplice e moderna, ma se sono necessarie la compatibilità del browser o il monitoraggio del progresso, si può anche considerare l'uso di XMLHttpRequest.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video