7.1 Verwendung von Callbacks
Fehlerbehandlung ist ein wichtiger Aspekt beim Schreiben von robustem und fehlertolerantem Code. In asynchronem JavaScript-Code
können sowohl in synchronen als auch in asynchronen Operationen Fehler auftreten. Richtiges Fehlermanagement hilft,
unerwartete Abstürze zu vermeiden und gibt den Nutzern nützliche Fehlermeldungen. Lass uns einige
Methoden zur Fehlerbehandlung in asynchronem Code untersuchen, einschließlich Callbacks, Promises und async/await.
Vor der Einführung von Promises und async/await wurde asynchroner Code oft mit Callbacks implementiert.
In diesem Ansatz werden Fehler als erstes Argument an den Callback übergeben.
Beispiel:
function fetchData(callback) {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Failed to fetch data') : null;
const data = error ? null : { id: 1, name: 'John Doe' };
callback(error, data);
}, 1000);
}
fetchData((error, data) => {
if (error) {
console.error('Error:', error);
} else {
console.log('Data:', data);
}
});
7.2 Verwendung von Promises
Fehlerbehandlung mit Promises
Promises bieten eine strukturiertere Weise, mit asynchronem Code zu arbeiten. Fehler werden mit der
Methode catch behandelt.
Beispiel:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Failed to fetch data') : null;
if (error) {
reject(error);
} else {
resolve({ id: 1, name: 'John Doe' });
}
}, 1000);
});
}
fetchData()
.then(data => console.log('Data:', data))
.catch(error => console.error('Error:', error));
Fehlerbehandlung mit async/await
async/await bietet eine syntaktisch bequeme Weise, mit asynchronem Code zu arbeiten, was ihn lesbarer
und ähnlicher wie synchronen Code macht. Fehler in asynchronen Funktionen können mit try...catch behandelt werden.
Beispiel:
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Failed to fetch data') : null;
if (error) {
reject(error);
} else {
resolve({ id: 1, name: 'John Doe' });
}
}, 1000);
});
}
async function loadData() {
try {
const data = await fetchData();
console.log('Data:', data);
} catch (error) {
console.error('Error:', error);
}
}
loadData();
7.3 Globale Fehlerbehandlung
Für die globale Fehlerbehandlung in asynchronem Code können window.onError und window.onUnhandledRejection verwendet werden.
Beispiel für window.onError:
window.onerror = function (message, source, lineno, colno, error) {
console.error('Global error handler:', error);
};
setTimeout(() => {
throw new Error('Test error');
}, 1000);
Beispiel für window.onunhandledrejection:
window.onunhandledrejection = function (event) {
console.error('Unhandled rejection:', event.reason);
};
Promise.reject(new Error('Test unhandled rejection'));
7.4 Anwendungsbeispiele
1. Asynchrone HTTP-Anfragen mit Fetch und Fehlerbehandlung:
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('Data:', data);
} catch (error) {
console.error('Fetch error:', error);
}
}
fetchData();
2. Paralleles Ausführen von Anfragen mit Promise.all und Fehlerbehandlung:
async function fetchMultipleData() {
try {
const [response1, response2] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts/1'),
fetch('https://jsonplaceholder.typicode.com/posts/2')
]);
if (!response1.ok || !response2.ok) {
throw new Error('One of the responses was not ok');
}
const data1 = await response1.json();
const data2 = await response2.json();
console.log('Data 1:', data1);
console.log('Data 2:', data2);
} catch (error) {
console.error('Fetch multiple data error:', error);
}
}
fetchMultipleData();
GO TO FULL VERSION