7.1 使用回呼函式
錯誤處理是撰寫穩定且可靠程式碼的重要環節。在非同步的 JavaScript 程式碼中，錯誤可能會在同步和非同步操作中發生。正確的錯誤管理幫助避免意外崩潰，並向使用者提供有用的錯誤訊息。我們來看看一些非同步程式碼中的錯誤處理方法，包括回呼函式、Promis 和 async/await。
在 Promis 和 async/await 出現之前，非同步程式碼通常是使用回呼函式實現的。在這種方法中，錯誤以第一個參數的形式傳遞到回呼函式中。
範例：
JavaScript
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 使用 Promis
使用 Promis 的錯誤處理
Promis 提供了一個更為結構化的方法來處理非同步程式碼。錯誤透過 catch 方法處理。
範例：
JavaScript
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));
使用 async/await 的錯誤處理
async/await 以語法上友好的方式處理非同步程式碼，使其更具可讀性且更像同步程式碼。可以使用 try...catch 來處理非同步函式中的錯誤。
範例：
JavaScript
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 全域錯誤處理
對於非同步程式碼的全域錯誤處理，可以使用 window.onError 和 window.onUnhandledRejection。
window.onError 的範例：
JavaScript
window.onerror = function (message, source, lineno, colno, error) {
console.error('Global error handler:', error);
};
setTimeout(() => {
throw new Error('Test error');
}, 1000);
window.onunhandledrejection 的範例：
JavaScript
window.onunhandledrejection = function (event) {
console.error('Unhandled rejection:', event.reason);
};
Promise.reject(new Error('Test unhandled rejection'));
7.4 使用範例
1. 使用 Fetch 進行非同步 HTTP 請求及錯誤處理：
JavaScript
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. 使用 Promise.all 進行並行請求及錯誤處理：
JavaScript
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