Fetch/XMLHttpRequest in TypeScript

Dit artikel legt Fetch/XMLHttpRequest uit in TypeScript.

Je kunt leren hoe je de Fetch API en XMLHttpRequest kunt gebruiken, evenals de verschillen ertussen.

YouTube Video

Fetch/XMLHttpRequest in TypeScript

In TypeScript worden HTTP-verzoeken voornamelijk uitgevoerd met behulp van twee API's: Fetch API en XMLHttpRequest. Door TypeScript te gebruiken, kun je typecontrole introduceren voor verzoeken en reacties bij het uitvoeren van asynchrone communicatie met deze API's, waardoor je veiliger code kunt schrijven. Hieronder bespreken we hoe je elk van deze kunt gebruiken.

Fetch API

De Fetch API is een op Promises gebaseerde API die wordt gebruikt om eenvoudig asynchrone communicatie (HTTP-verzoeken) uit te voeren. In TypeScript kun je verzoeken uitvoeren met de fetch-methode en reacties verwerken op een typeveilige manier.

Basisgebruik

Hieronder staat een eenvoudig voorbeeld met een GET-verzoek.

 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    });

• Deze code stuurt een GET verzoek naar de opgegeven URL, analyseert het ontvangen antwoord als JSON en toont het in de console.

Type-veilige gegevensverwerking in TypeScript

Omdat de reactie van de fetch-methode een onduidelijk type heeft, kun je gebruikmaken van TypeScript's typecontrole door het reactietype expliciet te definiëren.

 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    });

• Deze code past het Post type toe op de gegevens die met fetch zijn opgehaald, verwerkt het antwoord op type-veilige wijze en toont de titel van elke post in de console.

Voorbeeld van een POST-verzoek

Gebruik de POST-methode bij het verzenden van gegevens naar de server. Om JSON in de body te verzenden, specificeer je headers en 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    });

• Deze code stuurt gegevens in JSON-formaat naar de server met een POST verzoek, ontvangt het antwoord als JSON en toont het in de console.

Fetch met behulp van asynchrone functies (async/await)

Door async/await in TypeScript te gebruiken, kun je asynchrone verwerking eenvoudiger schrijven.

 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();

• Deze code haalt asynchroon postgegevens op met behulp van de async/await-syntaxis, verwerkt het antwoord als een Post[] type en toont het in de console.

XMLHttpRequest

XMLHttpRequest is een oudere API en is enigszins complexer in vergelijking met de Fetch API, maar kan worden gebruikt wanneer browsercompatibiliteit of meer geavanceerde controle nodig is.

Basisgebruik van XMLHttpRequest

Hieronder staat een voorbeeld van een GET-verzoek.

 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();

• Deze code stuurt een GET verzoek naar de opgegeven URL met XMLHttpRequest, analyseert het antwoord als JSON en toont het in de console.

Voorbeeld van een POST-verzoek

Bij het verzenden van gegevens naar de server geef je POST op in de open-methode en verzend je gegevens met 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);

• Deze code verstuurt gegevens in JSON-formaat naar de server met een POST verzoek via XMLHttpRequest en toont het antwoord met de aangemaakte gegevens in de console.

Foutafhandeling met XMLHttpRequest

Je kunt verzoekfouten afhandelen met behulp van het onerror-event.

 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();

• Deze code voert een GET verzoek uit met XMLHttpRequest, behandelt verzoekfouten met onerror en registreert het antwoord op de juiste manier bij zowel succes als falen.

Vergelijking van Fetch API en XMLHttpRequest

Samenvatting

In TypeScript kun je asynchrone verzoeken bondig en type-veilig schrijven met behulp van de Fetch API. Aan de andere kant is XMLHttpRequest een oudere API, maar kan deze nog steeds in bepaalde situaties worden gebruikt. Over het algemeen wordt aanbevolen om de eenvoudige en moderne Fetch API te gebruiken, maar als browsercompatibiliteit of voortgangsbewaking nodig is, kan XMLHttpRequest ook worden overwogen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video