[프론트엔드]_JavaScript(es6)_8.Promise

공부 자료 : 드림코딩 by 엘리

 

개발 환경 : visual studio code

언어 : js

 

1. Promise 이론

자바스크립트 안에 내장되어 있는 object 비동기적인 함수를 구현할 때 사용하게 된다.

무자비한 콜백 지옥대신 간결하게 사용할 수 있다.

 

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하게 된다.

시간이 걸리는 것들은 동기식 방법을 사용하게 되면 시작과 함께 로딩시간이 길어질 것이기 때문이

이러한 네트워크 처리, 파일 다운로드 ,Api 처리등은 프로미스를 많이 사용하게 된다.

 

만약 사용자가 요청했을 때만 해야 하는 경우라면 자칫하다가는 불필요한 함수가 실행 될 수 있다.

그 이유는 promise 가 만들어지는 순간 전달한 executor 함수가 바로 실행이 된다. 이를 유의하여 코딩하여야한다.

 

promise 에는 2가지가 중요하다

    state : 상태  resolve, reject

    Producer / Consumer

 

2. Promise 예제

생성자로 Promise 를 만들면 위의 콘솔 로그가 바로 실행이 된다. 이유는 앞에서 설명한거와 같이 생성과 동시에

안에있는 함수가 실행이 되기 때문이다.

그뒤 setTImeout를 부르게 되고 만약 성공을 한다면 resolve안의 값이 전달하고 실패시 reject 부분이 전달된다.

 

promise. 으로 참조한뒤 then을 사용한다.

만약 프로미스가 잘 실행이 되서 resolve 값이 전달되면 then 안의 함수가 실행되고

실패시 reject 의 값이 전달되면 catch 부분이 실행된다.

finally는 성공 실패 와 상관없이 마지막에 무조건 실행되는 부분이다.

 

성공 시 yoon이라는 값이 콘솔에 출력되고 finally가 이어서 출력된다.

실패 시 error 가 콘솔에 출력되고 finally가 이어서 출력된다.

 

원리는 promise 에서 then을 호출하게 되면 다시 프로미스가 리턴이 되고 이어서 리턴된 프로미스를 catch에 등록하는 식으로 이루어 진다.

 

3. Promise chaining

연속적으로 then을 사용하게되면 어떻게 이루어지는지 알아보면 다음과 같다

 

fetchNumber 이라는 곳에 생성자로 Promise를 만든다. 해당 안의 함수는 1초를 지연하고 1을 반환하게 된다.

 

.을 이용해서 then을 호출하게 되면 reject가 없기 때문에 바로 resolve의 값이 전달 되고 그값은 연산을 하게 된다. 

다시 promise 를 리턴해서 then이 호출이 되고 연산되어진 값을 기준으로 재연산을 한다.

3번째 then에서는 다시 새로운 Promise를 만들고 1초 딜레이를 준 다음에 전달받은 값에 -1을 하게 된다. 

최종적으로 then에서는 5 가 출력이 된다.

 

4. 에러 핸들링

각각

3가지의 함수를 선언하고 각각 promise 가 적용되어 있다.

getHen()의 then을 통해 (reject 가 없고 바로 resolve)

 

닭이란 값을 1초 딜레이를 가지고 전달받는다. 그 값을 바로 getEgg에 전달하게 된다.

getEgg 에서는 hen을 전달받게 되고 원래라면 1초 딜레이 이후 닭 => egg 의 값을 전달하게 된다

이 값을 그대로 cook으로 전달받게 되고 닭 => egg => cooked egg 가 최종적으로 출력되게 된다.

 

하지만 getEgg에서 reject를 보내게 된다면 오류가 발생한다.

하지만 오류가 발생하는 지점에서 catch문을 사용해서 반환되는 값을 변경 할 수도 있다.

원래는 닭=> egg 부분이 bread 로 변경되서 전달이 된다.

그러면 최종적으로 전달되는 값은 bread => cooked egg 가 된다.

이러한 식으로 에러부분에 catch를 사용해서 치명적인 오류로 종료되는 것을 막거나 위치를 log로 알 수 있게 해준다.