[javascript] 프로미스와 이벤트 처리를 결합한 활용 방법
프로미스(Promise)와 이벤트 처리를 결합하여 비동기 작업을 효과적으로 처리하는 방법에 대해 알아보겠습니다.
프로미스란?
프로미스는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업이 완료되었을 때 결과 값을 반환하거나 에러를 처리할 수 있습니다. 프로미스는 주로 AJAX 요청이나 파일 로딩 등의 비동기 작업에서 많이 사용됩니다.
const promise = new Promise((resolve, reject) => {
// 비동기 작업 수행
// 작업이 성공적으로 완료되면 resolve 실행
// 작업 중에 에러가 발생하면 reject 실행
});
이벤트 처리하기
이벤트는 프로그램에서 발생하는 특정 사건을 의미합니다. 예를 들어 버튼을 클릭하면 클릭 이벤트가 발생합니다.
button.addEventListener('click', () => {
// 클릭 이벤트 처리
});
프로미스와 이벤트 처리를 결합하여 활용하기
프로미스와 이벤트를 결합하여 비동기 작업을 처리할 수 있습니다. 예를 들어 AJAX 요청을 보내고 응답을 받을 때까지 기다린 후에 결과를 처리하는 경우입니다.
function fetchData() {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data');
request.addEventListener('load', () => {
if (request.status === 200) {
resolve(request.response);
} else {
reject(new Error('Request failed'));
}
});
request.send();
});
}
fetchData()
.then(response => {
// 응답 데이터 처리
})
.catch(error => {
// 에러 처리
});
위 코드에서 fetchData 함수가 프로미스를 반환합니다. 이 함수를 호출한 후에 then 메서드를 통해 응답 데이터를 처리하거나, catch 메서드를 통해 발생한 에러를 처리할 수 있습니다.