7.1 Utilisation de callbacks
La gestion des erreurs est un aspect crucial pour écrire du code fiable et résistant aux défaillances. Dans le code JavaScript asynchrone,
les erreurs peuvent survenir dans des opérations synchrones et asynchrones. Une bonne gestion des erreurs aide
à éviter les pannes inattendues et offre aux utilisateurs des messages d'erreur utiles. Examinons quelques
méthodes de gestion des erreurs dans le code asynchrone, y compris les callbacks, les promesses et async/await.
Avant l'avènement des promesses et async/await, le code asynchrone était souvent mis en œuvre avec des callbacks.
Dans cette approche, les erreurs sont transmises à un callback comme premier argument.
Exemple :
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 Utilisation de promesses
Gestion des erreurs avec des promesses
Les promesses offrent un moyen plus structuré de travailler avec du code asynchrone. Les erreurs sont gérées
via la méthode catch.
Exemple :
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));
Gestion des erreurs avec async/await
async/await offre un moyen syntaxiquement pratique de travailler avec du code asynchrone, le rendant plus lisible
et semblable au code synchrone. Les erreurs dans les fonctions asynchrones peuvent être gérées avec la construction try...catch.
Exemple :
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 Gestion globale des erreurs
Pour la gestion globale des erreurs dans le code asynchrone, on peut utiliser window.onError et window.onUnhandledRejection.
Exemple pour window.onError :
window.onerror = function (message, source, lineno, colno, error) {
console.error('Global error handler:', error);
};
setTimeout(() => {
throw new Error('Test error');
}, 1000);
Exemple pour window.onunhandledrejection :
window.onunhandledrejection = function (event) {
console.error('Unhandled rejection:', event.reason);
};
Promise.reject(new Error('Test unhandled rejection'));
7.4 Exemples d'utilisation
1. Requêtes HTTP asynchrones avec Fetch et gestion des erreurs :
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. Exécution parallèle de requêtes avec Promise.all et gestion des erreurs :
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