7.1 Використання колбеків
Обробка помилок — це важливий аспект написання надійного й стійкого до збоїв коду. У асинхронному JavaScript-коді, помилки можуть виникати як у синхронних, так і в асинхронних операціях. Правильне управління помилками допомагає уникати несподіваних збоїв і надає користувачам корисні повідомлення про помилки. Розгляньмо кілька методів обробки помилок у асинхронному коді, включаючи колбеки, проміси та async/await.
До появи промісів і async/await, асинхронний код часто реалізовувався з використанням колбеків. У цьому підході помилки передаються в колбек у вигляді першого аргументу.
Приклад:
function fetchData(callback) {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Не вдалося отримати дані') : null;
const data = error ? null : { id: 1, name: 'John Doe' };
callback(error, data);
}, 1000);
}
fetchData((error, data) => {
if (error) {
console.error('Помилка:', error);
} else {
console.log('Дані:', data);
}
});
7.2 Використання промісів
Обробка помилок за допомогою промісів
Проміси надають більш структурований спосіб роботи з асинхронним кодом. Помилки обробляються за допомогою методу catch.
Приклад:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Не вдалося отримати дані') : null;
if (error) {
reject(error);
} else {
resolve({ id: 1, name: 'John Doe' });
}
}, 1000);
});
}
fetchData()
.then(data => console.log('Дані:', data))
.catch(error => console.error('Помилка:', error));
Обробка помилок за допомогою async/await
async/await надає синтаксично зручний спосіб роботи з асинхронним кодом, роблячи його більш читабельним і схожим на синхронний. Помилки в асинхронних функціях можуть бути оброблені за допомогою конструкції try...catch.
Приклад:
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const error = Math.random() > 0.5 ? new Error('Не вдалося отримати дані') : null;
if (error) {
reject(error);
} else {
resolve({ id: 1, name: 'John Doe' });
}
}, 1000);
});
}
async function loadData() {
try {
const data = await fetchData();
console.log('Дані:', data);
} catch (error) {
console.error('Помилка:', error);
}
}
loadData();
7.3 Глобальна обробка помилок
Для глобальної обробки помилок в асинхронному коді можна використовувати window.onError і window.onUnhandledRejection.
Приклад для window.onError:
window.onerror = function (message, source, lineno, colno, error) {
console.error('Глобальний обробник помилок:', error);
};
setTimeout(() => {
throw new Error('Тестова помилка');
}, 1000);
Приклад для window.onunhandledrejection:
window.onunhandledrejection = function (event) {
console.error('Невідхилене відхилення:', event.reason);
};
Promise.reject(new Error('Тестове невідхилене відхилення'));
7.4 Приклади використання
1. Асинхронні HTTP-запити з Fetch та обробка помилок:
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error('Відповідь мережі була не ок');
}
const data = await response.json();
console.log('Дані:', data);
} catch (error) {
console.error('Помилка Fetch:', error);
}
}
fetchData();
2. Паралельне виконання запитів з Promise.all та обробка помилок:
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('Одна з відповідей була не ок');
}
const data1 = await response1.json();
const data2 = await response2.json();
console.log('Дані 1:', data1);
console.log('Дані 2:', data2);
} catch (error) {
console.error('Помилка Fetch кількох даних:', error);
}
}
fetchMultipleData();
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ