간단한 예시로 알아보는 JavaScript Promise (feat. MDN)

han0gu·2021년 9월 18일
0

JavaScript 기초

목록 보기
3/5
post-thumbnail

Promise 간단 요약

자바스크립트에서 Promise 객체는 비동기 작업의 완료 또는 실패에 대한 정보를 담고 있습니다.

Promise 객체를 생성할 때 생성자 함수에 executor라는 함수를 전달하게 되는데
이 때 executorresolvereject라는 함수를 인자로 받습니다.
우리는 resolvereject라는 함수로 비동기 작업의 완료와 실패를 구분할 수 있습니다.

위와 같은 과정을 거치는 동안 Promise 객체는
pending, fulfilled, rejected라는 세 가지 상태를 갖게 됩니다.

Promise.prototype에 구현되어 있는 then, catch, finally와 같은 메서드를 활용하면
비동기 작업을 효율적으로 처리할 수 있습니다.



Promise의 상태

pending - 비동기 작업을 완료하거나 실패하지 않은 초기 상태

fulfilled - 비동기 작업을 정상적으로 완료한 상태

rejected - 비동기 작업을 실패한 상태 (오류 발생 등)

settled - 비동기 작업을 완료하거나 실패한 상태. fulfilled 또는 rejected



resolve

resolve 함수는 비동기 작업이 정상적으로 완료되었음을 나타냅니다.

주의 !

resolve를 사용하는 두 가지 방법에는 미묘한 차이가 있습니다.
아래 링크는 그 차이를 잘 설명해주신 한장현님의 포스트입니다.
Promise 를 사용하는 두 가지 방법, new Promise, Promise.resolve()



reject

reject 함수는 비동기 작업이 실패했음을 나타냅니다.


간단한 예시

orderMenu 함수는 minutes 후에 Promise 객체를 생성하고 있습니다.
setTimeout 함수를 사용하였으니 비동기로 처리하겠네요.

이 때 orderMenu 함수에 menu라는 인자가 제대로 전달된 경우
resolve 함수를 호출하여 비동기 작업이 정상적으로 완료되었음을 알리고
제대로 전달되지 않은 경우 reject 함수를 호출하여 작업이 실패되었음을 알립니다.



다음 글
간단한 예시로 알아보는 JavaScript 동기 처리


Reference
Promise
Promise.resolve()
Promise.reject()

1개의 댓글

comment-user-thumbnail
2021년 9월 21일

자바스크립트
복습은 이걸로 퉁치겠습다..!

답글 달기