[JS] Promise개념정리

natural_min·2021년 11월 25일
0

JS

목록 보기
2/9

promise 관련 MDN

Promise 용어정리

Promise : 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다.
정해진 시간에 기능을 정상적으로 잘 수행했다면 성공 메시지를 전달하고,
반대로 기능 수행 중 예상치 못한 문제가 발생하면 에러메시지를 전달한다.

Promise - state

pending : 수행 중
fulfilled : 수행 성공 완료
rejected : 수행 실패

Producer vs Consumer

뜻대로 생산자와 소비자
여기서 Producer = Promise 객체.

1. Producer

resolve : 기능을 정상적 수행 후 마지막에 최종 데이터를 전달하는 함수
reject : 기능 수행 중 문제 생기면 호출하는 함수
보통 network관련 기능수행이나 파일읽기와 같은 시간이 걸리는 일이
Promise객체 안에서 진행됨. 비동기적으로 처리하는 것이 훨씬 효율적임.

중요사항: 새로운 Promise가 생성될 때, 자동적으로 실행이 되므로 주의할 것!
(When new Promise is created, the executor runs automatically.)


다음과 같이 promise객체를 생성하였다. (Producer생성완료)

2. Consumers

1) then


위와 같이 promise에서 성공적으로 수행되서 출력되는 값인 'ellie'가
then함수의 value라는 매개변수를 통해 console창에 그대로 출력되는 것을 확인할 수 있다.
즉 then은 promise를 똑같이 return할 수 있다.

반대로 resolve가 아닌 reject함수가 실행되는 경우는 어떤지 확인해보자.

다음과 같이 console창에 에러메시지가 뜨는 것을 확인할 수 있다.

2) catch
이때 에러를 다루는 함수는 catch이다.

console창을 확인해보면 error를 가져와서 출력하는 것을 확인할 수 있다.

위에서 promise를 똑같이 return가능한 then함수를 사용했기 때문에
뒤이어 catch함수를 쓸 수 있다.

3) finally
성공, 실패 여부 상관없이 마지막에 호출되는 함수이다.
아무런 인자를 받지 않는다.

resolve(성공)가 구현될 때,

reject가 구현될 때,

3. Promise Chaining

다른 비동기적 요소와 함께 묶어서 출력이 가능하다.

4. 이전 콜백지옥 vs promise변환 코드

기존의 콜백지옥 코드와 그 코드를 promise로 변환한 코드비교이다.

ellie쌤 유투브 참고
자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

0개의 댓글