[JS] 비동기2 | Promises란? | 프라미스 체인닝

Promises 란? 

1. 콜백 함수 대신 비동기를 간편하게 처리할 수 있게 도와주는 오브젝트 

2. 정해진 기능을 수행시

성공하면 성공의 메세지와 처리된 결과값을 전달해 주고,

실패 시 에러를 전달해준다. 

3. network 통신을 하거나, 파일 읽어서 올 때 등

무거운 오퍼레이터를 수행시 프라미스를 사용하면 

수행하는 동안 다음 코드들도 수행될 수 있다. 

 

 

1.state 

프로세스가 무거운 오퍼레이션을 수행하는 중인지

기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 알려준다.

 

state: pending

operation이 수행 중일 때

 

state: fulfilled / rejected 

operation 완료 / 실패

 

 

2. producer / consumer 차이 

producer: 원하는 데이터를 제공하는 사람 

consumer: 데이터를 쓰는 사람

 

---

 

1. Producer: 프라미스 오브젝트 만들기 

프라미스는 클래스라서 new를 사용하여 오브젝트를 생성한다.

executor라는 콜백함수를 전달해줘야 한다. 

 

 

이 콜백 함수 안에 resolve, reject라는 2가지의 콜백함수를 받는다.

resolve: 성공했을 시 데이터를 성공적으로 전달 

reject: 문제 발생시 

콘솔

 

주의 

프라미스를 만드는 순간 executor 콜백 함수가 바로 실행이 된다.

이 말은 프로미스 안에 네트워크 통신 코드를 작성했다면 

프라미스가 만들어지는 그 순간 바로 네트워크 통신 바로 수행하게 된다. 

 

네트워크 요청을 사용자가 요구한 경우만 해야하는 경우라면 

예를 들어 사용자가 버튼을 눌렀을 때 네트워크 통신을 해야한다면 

위의 방식으로 작성하면 불필요한 통신이 발생한다. 

 

 

 

2.  consumer: .then .catch .finally 

이 함수로 값을 받아 올 수 있다. 

 

 .then ( )

then: 프라미스가 잘 수행됐을 시 동작

 

 resolve에 있는 파라미터 값이 value로 전달되어 들어온다. 

콘솔

 

 

 .catch( ) 

resolve 대신 reject 사용 해보자.

reject는 Error라는 오브젝트를 통해 값을 전달 

Error 클래스는 Error 오브젝트를 사용하여 내용을 입려해준다. 

 

Error: 자바스크립트에서 제공하는 오브젝트 중 하나

에러 발생시 어떤 에러 인지 잘 명시해 줘야한다. 

 

then을 이용해서 reject이나 Error를 잡지 못한다. 

then은 성공시에만 다루기 때문이다. 

 

그래서 catch를 사용해서 error가 발생했을 시 어떻게 할 것인지 

내용을 등록해 준다.

 

 

 .finally ( ) 

성공, 실패 상관없이 무조건 호출 

 

 

resolve인 경우에도

마지막은 finally가 나옴 

콘솔

 

 

reject인 경우에도

마지막은 finally가 나옴

콘솔

 

---

Promise Chaining 

위의 then의 결과 값을 받아 다시 연산 하는 것 

 

예시 1) 

 

 

then 은 값을 전달할 수도 있고,

3 번째 then처럼 promise를 전달해도 된다.

콘솔

 

예시 2) 

닭에서 계란 받아 계란 후라이 만들기 

 

1. Promise 코드 만들기 

 

3초 뒤

 

 

2. 코드 정리 

받아오는 벨류 하나가 바로 전달되면 벨류 생락이 가능하다 

 

 

3. 에러 핸들링하기 

여기서 네트워크 에러가 발생하여 실패하는 경우라고 가정하고 

catch를 이용해서 error handling을 해준다. 

 

 

 

4. 에러 바로 처리 하기 

에러가 발생했을 시 다른 재료로 대체를 가고 싶다면 

에러 날 수 있는 곳 바로 뒤에 catch 함수를 써서 대체할 내용을 적어준다. 

getEgg 바로 뒤에 catch 적어주어 getEgg에서 에러가 나면 

catch에 있는 내용이 나오도록 했다.

 

 

콘솔

계란이 아니라 대체해 놓은 내용이 나왔다.

 

 

---

 

 

콜백 지옥에서 나온 코드 Promise로 고쳐보기 

 

콜백 지옥 코드는 다음과 같았다. 

 

 

Promise 형태로 바꾸면 다음과 같다

 

 

실행 시켜보면

 

 

 

 

에러인 경우 

 

 

에러가 발생하였다.

 

 

 

async, await을 배우면 이 것보다 더 간단히 코드를 작성할 수 있다.

 

 

 

 

-- 출처--

https://youtu.be/s1vpVCrT8f4