Promise, async/await

keemsebeen·2024년 4월 22일

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 

콜백 헬이나 에러 처리가 곤란하다는 문제점을 극복하기 위해 등장했다. 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.

생성
new 연산자와 함께 호출하면 프로미스를 생성한다.

상태

상태정보의미상태 변경 조건
pending비동기 처리가 아직 수행되지 않은 상태프로미스가 생성된 직후 기본 상태
fulfilled비동기 처리가 수행된 상태(성공)resolve 함수 호출
rejected비동기 처리가 수행된 상태(실패)reject 함수 호출

프로미스는 기본적으로 pending 상태이다. 프로미스 상태는 resolve, reject 함수를 호출하는 것으로 결정된다.

비동기 처리를 수행할 콜백 함수를 인수로 전달 받는데 이 콜백함수는 resolve와 reject 함수를 인수로 전달 받는다. 비동기 처리가 성공하면 비동기 처리 결과를 resolve 함수에 인수로 전달하면서 호출하고, 비동기 처리가 실패하면 에러를 reject 함수에 인수로 전달하면서 호출한다.

후속 처리 메소드

비동기 처리 상태가 변화하면 이에 따른 후속 처리를 해야한다. 이를 위해 then, catch, finally를 제공한다.

then
두 개의 콜백 함수를 인수로 전달받는다.

첫 번째 콜백 함수는 비동기 처리가 성공했을 때 호출되는 성공 처리 콜백 함수이며, 두번째 콜백함수는 비동기 처리가 실패했을 때 호출되는 실패처리 함수다.

catch
프로미스가 rejected 상태인 경우만 호출된다.

finally
프로미스의 성공/실패 여부와 상관없이 무조건 한 번 호출된다.

async/await

프로미스 기반으로 동작하며 the/catch/finally(후속 처리 메소드)에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기처럼 프로미스를 사용할 수 있다.

async 키워드
await키워드는 반드시 async 함수 내부에서 사용해야 한다. async 함수는 언제나 프로미스를 반환하며, 암묵적으로 반환 값을 resolve하는 프로미스를 반환한다.

await 키워드
프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. 실행을 중지시켰다가 프로미스가 settled상태가 되면 다시 재개한다.

에러 처리
try/catch문을 사용하여 에러처리를 한다.

profile
프론트엔드 공부 중인 김세빈입니다. 👩🏻‍💻

0개의 댓글