[Javascrit] Promise와 async/await

곽태민·2023년 4월 20일
0

TIL

목록 보기
12/63

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/awaitPromise와 다르게 Error를 핸들링 할 수 있는 기능이 없어서 try-catch()문을 통하여 Error를 핸들링 할 수 있다.

Promise와 async/await 차이점


  1. Error 핸들링
    • Promise를 사용하면 .catch()문을 통하여 Error 핸들링이 가능하다.
    • async/await은 Error 핸들링 기능이 없어서 try-catch()문을 통하여 핸들링을 할 수 있다.
  2. 코드 가독성
    • Promisethen() 지옥의 가능성이 있다.
    • 코드가 길어질수록 async/await을 활용한 코드가 가독성이 좋다.
    • async/await은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해하기 쉽다.
profile
Node.js 백엔드 개발자입니다!

0개의 댓글