7.1 Sử dụng callbacks
Xử lý lỗi là một phần quan trọng trong việc viết code đáng tin cậy và chống lại sự cố. Trong JavaScript không đồng bộ,
lỗi có thể xảy ra cả trong các hoạt động đồng bộ và không đồng bộ. Quản lý lỗi đúng cách giúp
tránh các sự cố bất ngờ và cung cấp cho người dùng thông báo lỗi hữu ích. Hãy cùng xem qua vài
phương pháp xử lý lỗi trong code không đồng bộ, bao gồm callbacks, promises và async/await.
Trước khi có promises và async/await, code không đồng bộ thường được thực hiện thông qua callbacks.
Trong cách tiếp cận này, lỗi được truyền vào callback dưới dạng đối số đầu tiên.
Ví dụ:
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 Sử dụng promises
Xử lý lỗi với promises
Promises mang đến cách tiếp cận có cấu trúc hơn cho xử lý code không đồng bộ. Lỗi được xử lý
thông qua phương thức catch.
Ví dụ:
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));
Xử lý lỗi với async/await
async/await cung cấp một cách viết cú pháp thuận tiện hơn để làm việc với code không đồng bộ, làm cho nó dễ đọc hơn
và giống như đồng bộ hơn. Lỗi trong các hàm không đồng bộ có thể được xử lý thông qua cấu trúc try...catch.
Ví dụ:
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 Xử lý lỗi toàn cục
Để xử lý lỗi toàn cục trong code không đồng bộ, bạn có thể sử dụng window.onError và window.onUnhandledRejection.
Ví dụ cho window.onError:
window.onerror = function (message, source, lineno, colno, error) {
console.error('Global error handler:', error);
};
setTimeout(() => {
throw new Error('Test error');
}, 1000);
Ví dụ cho window.onunhandledrejection:
window.onunhandledrejection = function (event) {
console.error('Unhandled rejection:', event.reason);
};
Promise.reject(new Error('Test unhandled rejection'));
7.4 Ví dụ về sử dụng
1. Yêu cầu HTTP không đồng bộ với Fetch và xử lý lỗi:
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. Thực hiện đồng thời các yêu cầu với Promise.all và xử lý lỗi:
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