7.1 コールバックの使用
エラー処理は、信頼性が高くて障害に強いコードを書くための大事な部分だよ。非同期のJavaScriptコードでは、
エラーは同期操作と非同期操作の両方で発生する可能性があるんだ。正しいエラー管理は、
予期しないクラッシュを避け、ユーザーに有益なエラーメッセージを提供するのに役立つんだ。非同期コードでのエラー処理の
方法として、コールバック、Promise、async/awaitを見てみよう。
Promiseや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 Promiseの使用
Promiseを使ったエラー処理
Promiseは非同期コードを扱うのにもっと構造的な方法を提供するよ。エラーは
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