Promise와 Async
- 자바스크립트에서 비동기 처리를 다루기 위한 두 가지 주요 패턴인 'Promise'와 'async/await'는 각각 고유한 특징과 사용 방법을 가지고 있다.
- 이 두 패턴은 비동기 작업을 더 쉽게 관리할 수 있도록 도와주지만, 사용 방식과 코드의 가독성 측면에서 차이가 있다.
Promise
- 'Promise'는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체이다.
- 'Promise'는 비동기 작업이 완료된 후의 결과를 약속(promise)하고, 그 결과에 따라 'then' 또는 'catch' 메서드를 통해 처리할 수 있다.
// Promise를 사용하는 예제
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received");
}, 1000);
});
}
fetchData().then(data => {
console.log(data); // "Data received"
}).catch(error => {
console.error(error);
});
async/await
- 'async' 함수는 항상 'Promise'를 반환한다.
- 'await' 키워드는 'async' 함수 내부에서만 사용할 수 있으며, 'Promise'가 해결될 때까지 실행을 일시 중지한다.
- 'await'을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 높아진다.
// async/await를 사용하는 예제
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received");
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data); // "Data received"
} catch (error) {
console.error(error);
}
}
main();
주요 차이점
- 코드 가독성
- Promise
- 'then'과 'catch'를 체이닝 하여 사용하며, 복잡한 비동기 작업에서는 가독성이 떨어질 수 있다.
- async/await
- 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 높아진다.
- 특히 여러 비동기 작업을 순차적으로 수행할 때 코드가 더 명확해진다.
- 에러 처리
- Promise
- 'catch' 메서드를 사용하여 에러를 처리한다.
- async/await
- 'try/catch' 블록을 사용하여 에러를 처리할 수 있어, 동기 코드와 비슷한 방식으로 예외 처리를 할 수 있다.
- 동작 방식
- Promise
- 'Promise' 객체를 반환하고, 'then'과 'catch'를 사용하여 비동기 작업의 완료 또는 실패를 처리한다.
- async/await
- 'async' 함수는 항상 'Promise'를 반환하며, 'await' 키워드는 'Promise'가 해결될 때까지 실행을 일시 중지시킨다.
- 이는 비동기 작업을 더 직관적으로 작성할 수 있게 한다.
- 병렬 처리
- Promise
- 여러 'Promise'를 'Promise.all'이나 'Promise.race'와 함께 사용하여 병렬 처리를 할 수 있다.
- async/await
- 'await'을 반복문에서 사용하면 비효율적일 수 있으므로, 병렬 처리가 필요할 때는 'Promise.all'과 함께 사용한다.
// Promise.all을 사용한 병렬 처리
async function fetchData1() {
return new Promise(resolve => setTimeout(() => resolve("Data 1"), 1000));
}
async function fetchData2() {
return new Promise(resolve => setTimeout(() => resolve("Data 2"), 1000));
}
async function main() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1, data2) // "Data 1", "Data 2"
}
main();
요약
- 'Promise'와 'async/await'는 모두 비동기 작업을 처리하기 위한 패턴이다.
- 'Promise'는 'then'과 'catch'를 사용하여 비동기 작업의 결과를 처리한다.
- 'async/await'는 비동기 코드를 동기 코드처럼 작성할 수 있도록 도와주며, 가독성이 높아진다.
- 에러 처리는 'Promise'에서는 'catch'로, 'async/await'에서는 'try/catch' 블록으로 할 수 있다.
- 병렬 처리는 'Promise.all'을 사용하여 효율적으로 처리할 수 있다.