JavaScript(ES6)| Promise 개념/활용

비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트.

 

Promise is a JavaScript object asynchronous operation.

:자바스크립트안에 내장 되어 있는 오브젝트.

:asynchronous(비동기)를 사용할 때 콜백함수 대신 유용하게 쓰임.

 

state: pending -> fulfilled or rejected

: 진행중->완료 or 파일을 찾을 수 없거나 네트워크에 문제가 생길때.

 

Producer vs Consumer

:데이터를 만들어내는 Producer vs 소비하는 Consumer

 

 

1. Producer

-when new Promise is created, the executor runs automatically.

promise를 만드는 순간, 우리가 전달한 executor라는 콜백함수가 바로 실행이 된다.

 

 

 

2. Consumers: then, catch, finally

-then

then은 promise가 성공적으로 진행이 되어

resolve의 파라미터 값이 전달되어져 오는 것을 볼 수 있다.

 

 

-catch

catch는 에러가 났을 때 어떻게 처리할 것인지 콜백함수를 등록해줘서 처리하는 것.

 

then은 똑같은 Promise를 리턴하기 때문에 

그 리턴된 Promise의 catch를 다시 호출할 수 있는 것.

 

비동기적으로 수행하고 싶은 기능들의 코드를 작성하고

성공하면 resolve를, 실패하면 reject를 호출하게 됨.

 

 

-finally

finally는 성공하든, 실패하든 무조건 호출됨.

 

 

 

3. Promise chaining

then은 값을 바로 전달할 수도있고 또 다른 promise를 전달할수도있다.

 

 

 

4. Error Handling

세 개의 promise를 사용하여 닭이, 달걀이 되고 달걀이 후라이가 되는 것을 생성.

 

이때, then에서 받아오는 value를 바로 다른 함수로 호출하는 경우에는

위 사진처럼 깔끔하게 식을 정리할 수 있다.

(한 가지만 받아서 그대로 전달하는 경우에만 생략이 가능)

 

 

여기서 에러가 발생했다고 reject를 설정하면 

사진과 같이 에러창이 발생함. 

이유는 catch핸들러가 없기 때문.

 

이렇게 catch를 통해 핸들링 해줘야 에러가 정상적으로 출력됨.

 

이렇게 달걀에서 에러가 생기면 🥖으로 대체해주는 값을 작성하여

달걀은 없지만 빵으로 대체해서 값이 출력되는 것을 볼 수있음.

getEgg에서 에러가 발생하면 처리하는 catch를 바로 밑에 작성하면 됨.

 

 

 

*이전 강의 콜백지옥을 promise로 해결하기!

가독성이 떨어지는 콜백 지옥 코드를

promise를 이용하면 더 간결하게 작성할 수 있다.

 

이전 콜백지옥의 링크는 여기 => songyi.tistory.com/10