7.1 콜백 사용하기
오류 처리는 안정적이고 오류에 강한 코드를 작성하기 위한 중요한 측면이야. 비동기 JavaScript 코드에서는 동기 및 비동기 작업 모두에서 오류가 발생할 수 있어. 적절한 오류 관리는 예상치 못한 중단을 피하고 사용자에게 유용한 오류 메시지를 제공하는 데 도움을 줘. 콜백, 프로미스 및 async/await 등 비동기 코드에서 오류를 처리하는 몇 가지 방법을 살펴보자.
프로미스와 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 프로미스 사용하기
프로미스를 사용한 오류 처리
프로미스는 비동기 코드를 처리하는 데 더 구조화된 방법을 제공해. 오류는 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