7.1 Uso de callbacks
El manejo de errores es un aspecto importante al escribir código confiable y a prueba de fallas. En el código asíncrono de JavaScript,
los errores pueden ocurrir tanto en operaciones síncronas como asíncronas. Un manejo adecuado de errores ayuda
a evitar fallos inesperados y proporciona a los usuarios mensajes de error útiles. Vamos a ver algunos
métodos de manejo de errores en código asíncrono, incluidos callbacks, promises y async/await.
Antes de la llegada de los promises y async/await, el código asíncrono a menudo se implementaba usando callbacks.
En este enfoque, los errores se pasan al callback como el primer argumento.
Ejemplo:
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 Uso de promises
Manejo de errores usando promises
Las promises proporcionan una forma más estructurada de trabajar con código asíncrono. Los errores se manejan
con el método catch.
Ejemplo:
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));
Manejo de errores usando async/await
async/await proporciona una forma más cómoda de sintaxis para trabajar con código asíncrono, haciéndolo más legible
y parecido al código síncrono. Los errores en funciones asíncronas pueden manejarse usando la construcción try...catch.
Ejemplo:
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 Manejo de errores global
Para el manejo global de errores en código asíncrono, se pueden usar window.onError y window.onUnhandledRejection.
Ejemplo para window.onError:
window.onerror = function (message, source, lineno, colno, error) {
console.error('Global error handler:', error);
};
setTimeout(() => {
throw new Error('Test error');
}, 1000);
Ejemplo para window.onunhandledrejection:
window.onunhandledrejection = function (event) {
console.error('Unhandled rejection:', event.reason);
};
Promise.reject(new Error('Test unhandled rejection'));
7.4 Ejemplos de uso
1. Solicitudes HTTP asíncronas con Fetch y manejo de errores:
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. Ejecución paralela de solicitudes con Promise.all y manejo de errores:
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