Fetch/XMLHttpRequest in TypeScript

Dieser Artikel erklärt Fetch/XMLHttpRequest in TypeScript.

Sie können lernen, wie man die Fetch API und XMLHttpRequest verwendet und welche Unterschiede sie haben.

YouTube Video

Fetch/XMLHttpRequest in TypeScript

In TypeScript werden HTTP-Anfragen hauptsächlich über zwei APIs durchgeführt: Fetch API und XMLHttpRequest. Durch die Verwendung von TypeScript können Sie für Anfragen und Antworten bei der asynchronen Kommunikation mit diesen APIs Typüberprüfungen einführen, sodass Sie sichereren Code schreiben können. Im Folgenden wird erläutert, wie jede dieser APIs verwendet wird.

Fetch API

Die Fetch API ist eine auf Promises basierende API, die eine einfache Durchführung von asynchroner Kommunikation (HTTP-Anfragen) ermöglicht. In TypeScript können Sie Anfragen mit der Methode fetch durchführen und die Antworten typensicher verarbeiten.

Grundlegende Verwendung

Nachfolgend ein einfaches Beispiel mit einer GET-Anfrage.

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

• Dieser Code sendet eine GET-Anfrage an die angegebene URL, parst die empfangene Antwort als JSON und gibt sie in der Konsole aus.

Typensichere Datenverarbeitung in TypeScript

Da die Antwort der Methode fetch einen unklaren Typ hat, können Sie mit TypeScript eine Typüberprüfung vornehmen, indem Sie den Antworttyp explizit definieren.

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

• Dieser Code wendet den Typ Post auf die mit fetch abgerufenen Daten an, verarbeitet die Antwort typsicher und gibt den Titel jedes Beitrags in der Konsole aus.

Beispiel für eine POST-Anfrage

Wenn Daten an den Server gesendet werden sollen, verwenden Sie die Methode POST. Um JSON im Body zu senden, müssen headers und body angegeben werden.

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

• Dieser Code sendet Daten im JSON-Format mit einer POST-Anfrage an den Server, empfängt die Antwort als JSON und gibt sie in der Konsole aus.

Fetch mit asynchronen Funktionen (async/await)

Durch die Verwendung von async/await in TypeScript können Sie asynchrone Prozesse einfacher schreiben.

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

• Dieser Code ruft asynchron Beitragsdaten mit der async/await-Syntax ab, verarbeitet die Antwort als Post[]-Typ und gibt sie in der Konsole aus.

XMLHttpRequest

XMLHttpRequest ist eine ältere API und im Vergleich zur Fetch API etwas komplexer, aber sie kann verwendet werden, wenn Browserkompatibilität oder eine umfangreichere Steuerung erforderlich ist.

Grundlegende Verwendung von XMLHttpRequest

Nachfolgend ein Beispiel mit einer GET-Anfrage.

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

• Dieser Code sendet eine GET-Anfrage an die angegebene URL mit XMLHttpRequest, parst die Antwort als JSON und gibt sie in der Konsole aus.

Beispiel für eine POST-Anfrage

Um Daten an den Server zu senden, geben Sie in der Methode open POST an und senden die Daten mit 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);

• Dieser Code sendet Daten im JSON-Format mit einer POST-Anfrage unter Verwendung von XMLHttpRequest an den Server und gibt die Antwort mit den erstellten Daten in der Konsole aus.

Fehlerbehandlung mit XMLHttpRequest

Sie können Anfragenfehler mit dem Event onerror behandeln.

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

• Dieser Code führt eine GET-Anfrage mit XMLHttpRequest aus, behandelt Anforderungsfehler mit onerror und protokolliert die Antwort sowohl bei Erfolg als auch bei Fehlern angemessen.

Vergleich zwischen Fetch API und XMLHttpRequest

Zusammenfassung

In TypeScript können Sie asynchrone Anfragen prägnant und typsicher mit der Fetch API schreiben. Andererseits ist XMLHttpRequest eine ältere API, kann aber in bestimmten Situationen weiterhin verwendet werden. Im Allgemeinen wird empfohlen, die einfache und moderne Fetch API zu verwenden, aber wenn Browser-Kompatibilität oder Fortschrittsverfolgung erforderlich ist, kann auch XMLHttpRequest in Betracht gezogen werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video