Promise
Promise는 Javascript에서 비동기 처리에 사용되는 객체로 내용은 실행이 되었지만 결과를 아직 반환하지 않은 객체이다.
Promise는 3가지의 상태가 있다.
- Pending (대기)
- Fulfilled (이행)
- Rejected (실패)
비동기 처리가 완료되지 않았으면 Pending, 완료 되었으면 Fulfilled, 실패하거나 오류가 발생했으면 Rejected 상태를 갖는다.
사용 예시
const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});
promise
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});변수 condition 값에 따라서 Promise의 반환 값이 결정되고 있는데, 값이 참이면 resolve를 호출하고, 참이 아니면 reject를 호출한다.
resolve한 반환 값에 대해서는 then()을 통해 결과 값을 반환 받을 수 있고, reject의 반환 값은 catch()를 통해서 반환 받는다.
then()과 catch()문의 체이닝을 통하여 비동기 로직의 성공 여부에 따른 분기처리가 가능하다.
async/await
가장 최근의 나온 비동기 처리 문법이다. Callback이나 Promise의 단점을 해소하고자 만들어졌다.
Callback이나 Promise의 단점은 꼬리에 꼬리를 무는 코드가 나오면서 코드의 가독성을 해치는 콜백 지옥이나, then() 지옥을 불러올 수 있다는 단점이 있다.
await을 통해서 Promise반환 값을 받아 올 수 있다.
(async () => {
const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});
try {
const result = await promise;
console.log(result);
} catch (err) {
console.error(err);
}
})();위의 Promise를 사용한 코드를 async/await을 사용해서 코드를 변경했다. 익명 함수 패턴을 활용했는데, async함수 내의 await을 통하여 Promise의 반환 값을 result변수에 담아서 콘솔에 출력하는 코드다.
또한 주의점은 async/await은 Promise와 다르게 Error를 핸들링 할 수 있는 기능이 없어서 try-catch()문을 통하여 Error를 핸들링 할 수 있다.
Promise와 async/await 차이점
- Error 핸들링
Promise를 사용하면.catch()문을 통하여 Error 핸들링이 가능하다.async/await은 Error 핸들링 기능이 없어서try-catch()문을 통하여 핸들링을 할 수 있다.
- 코드 가독성
Promise는then()지옥의 가능성이 있다.- 코드가 길어질수록
async/await을 활용한 코드가 가독성이 좋다. async/await은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해하기 쉽다.
