5.1 Fetch API
Für das Ausführen von HTTP-Anfragen in JavaScript werden oft zwei Bibliotheken verwendet: die eingebaute Funktion fetch und die externe Bibliothek Axios. Beide bieten leistungsstarke und flexible Möglichkeiten zur Interaktion mit API und anderen Webressourcen.
Fetch API ist eine in den Browser integrierte Methode zum Ausführen von HTTP-Anfragen. Sie basiert auf Promises und bietet einen flexiblen und modernen Ansatz für die Arbeit mit Netzwerk-Anfragen.
Syntax einer einfachen Fetch-Anfrage:
let promise = fetch(url, {method, headers,
body})
Hauptkonzepte von Fetch:
fetch(url, options): die Hauptmethode für das Ausführen von HTTP-Anfragen- Gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird
Beispiel einer einfachen GET-Anfrage mit Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Netzwerkfehler: Ungültige Antwort vom Server erhalten');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fehler bei der Ausführung der Anfrage: ', error);
});
Beispiel einer POST-Anfrage mit 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('Fehler bei der Ausführung der Anfrage: ', error);
});
Fetch-Einstellungen
Das Fetch API ermöglicht es, verschiedene Anfrageparameter durch das options-Objekt anzupassen, wie etwa Methode, Header, Anfrageinhalt und mehr.
const options = {
method: 'GET', // oder 'POST', 'PUT', 'DELETE' etc.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // wird für POST und PUT Anfragen verwendet
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler bei der Ausführung der Anfrage: ', error));
5.2 Die Bibliothek Axios
Axios ist eine beliebte Bibliothek zur Ausführung von HTTP-Anfragen in JavaScript. Sie bietet ein benutzerfreundlicheres und funktionaleres API im Vergleich zum nativen Fetch API und unterstützt viele zusätzliche Funktionen, wie z. B. automatische JSON-Umwandlung, Timeout-Handhabung, Abbruch von Anfragen und Unterstützung für ältere Browser.
Installation von Axios
Axios kann über npm installiert oder über CDN eingebunden werden.
Installation mit npm:
npm install axios
Einbindung in Node.js oder bei Nutzung von Modul-Bundlern (z. B. Webpack):
// Für CommonJS
const axios = require('axios');
// Für ES6 Module
import axios from 'axios';
Einbindung über CDN im Browser:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Syntax einer einfachen GET-Anfrage:
let promise = axios.get(url)
Syntax einer einfachen POST-Anfrage:
let promise = axios.post(url, data, config)
Hauptkonzepte von Axios:
- axios(config): die Hauptmethode für das Ausführen von HTTP-Anfragen
- Akzeptiert ein Konfigurationsobjekt, das
url,method,headers,dataund andere Parameter enthalten kann. - Shortcut-Methoden: Axios bietet Methoden für jede HTTP-Methode (
axios.get,axios.post,axios.put,axios.deleteetc.), was die Ausführung entsprechender Anfragen erleichtert. - Promises: Alle Axios-Methoden geben ein Promise zurück, das bei Erfolg in ein Response-Objekt aufgelöst oder bei Fehler abgelehnt wird.
Syntax einer einfachen GET-Anfrage mit Antwort- und Fehlerbehandlung:
axios.get(url)
.then(response => {
// Verarbeiten der erfolgreichen Antwort
})
.catch(error => {
// Verarbeiten der Fehler
});
Syntax einer einfachen POST-Anfrage mit Antwort- und Fehlerbehandlung:
axios.post(url, data, config)
.then(response => {
// Verarbeiten der erfolgreichen Antwort
})
.catch(error => {
// Verarbeiten der Fehler
});
Beispiel einer einfachen GET-Anfrage mit 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('Fehler bei der Ausführung der Anfrage: ', error);
});
Beispiel einer POST-Anfrage mit 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('Fehler bei der Ausführung der Anfrage: ', error);
});
5.3 Konfiguration von Axios
Axios-Einstellungen
Mit Axios kann man HTTP-Anfragen mittels eines config-Objektes konfigurieren, welches Parameter wie url, method, headers und Daten (data) enthält. Unten ist ein einfaches Beispiel einer Anfragekonfiguration:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // kann 'get', 'post', 'put', 'delete' etc. sein
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Header zur Angabe des Datentyps
},
// data: JSON.stringify(data) // Wird für POST und PUT Anfragen verwendet, um den Anfragetext zu senden
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Fehler bei der Ausführung der Anfrage: ', error));
Zusätzliche Funktionen von Axios:
- Anfrageparameter: Parameter können in der URL übergeben werden.
- Anfragen abbrechen: mit
AbortController. - Timeouts: Festlegen von Wartezeiten für die Anfrage.
Beispiel der Nutzung von Anfrageparametern:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Anfrageparameter werden über das params-Objekt übergeben
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Fehler bei der Ausführung der Anfrage: ', error);
});
5.4 Vergleich von Fetch und Axios
Schauen wir uns nun Fetch und Axios im Vergleich anhand der wichtigsten Merkmale an:
1. Benutzerfreundlichkeit:
- Fetch: einfach zu verwenden für grundlegende Operationen, erfordert jedoch zusätzliche Behandlung für komplexere Szenarien (z. B. JSON-Umwandlung, Timeout-Handhabung).
- Axios: bietet ein benutzerfreundlicheres und leistungsfähigeres API für komplexe Anfragen.
2. Unterstützung von JSON:
- Fetch: erfordert einen expliziten Aufruf von
response.json()zur Umwandlung des Antwortinhalts in JSON. - Axios: wandelt JSON-Antworten automatisch um.
3. Timeouts:
- Fetch: keine eingebaute Unterstützung für Timeouts. Für die Implementierung eines Timeouts ist das Verwenden von
AbortControlleroder Wrappern notwendig. - Axios: unterstützt Timeout-Einstellungen über die Konfiguration.
4. Interceptors:
- Fetch: unterstützt keine Anfrage- und Antwort-Interceptors.
- Axios: ermöglicht die Verwendung von Interceptors zum Ausführen von Logik vor und nach dem Senden einer Anfrage.
Beispiel mit Interceptors in Axios
Interceptors (Abfangmechanismen) ermöglichen das Ausführen gewisser Aktionen vor dem Absenden einer Anfrage oder nach dem Erhalt einer Antwort:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Hinzufügen eines Interceptors für Anfragen
axios.interceptors.request.use(config => {
console.log('Anfrage an den Server gesendet: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Hinzufügen eines Interceptors für Antworten
axios.interceptors.response.use(response => {
console.log('Antwort vom Server erhalten: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Beispiel einer Anfrage mit Interceptors
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Fehler bei der Ausführung der Anfrage: ', error));
Parallele Anfragen mit Axios
Mit Axios ist es einfach, parallele Anfragen auszuführen und die Ergebnisse mit Promise.all() zu verarbeiten:
<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('Fehler bei der Ausführung der Anfrage: ', error));
GO TO FULL VERSION