Promise 개념부터 활용

Promise

JavaScript에서 제공하는 비동기 처리를 간편하게 할 수 있도록 도와주는 Object이다. callback 함수를 사용하지 않고 비동기 코드를 깔끔하게 처리하게 해준다. Promise는 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행되어 졌다면 성공의 message와 함께 처리의 결과 값을 전달해주고, 기능을 수행하다 예상치 못한 문제가 발생했다면, error를 전달해 준다.

 

JavaScript안에 내장 되어 있는 Object이다. asynchronous operation을 위해서 사용된다. 비동기적 코드를 사용할 때 callback 함수 대신 유용하게 사용할 수 있다.

 

두가지 Point

1. state

프로세스가 무거운 operation을 실행하고 있는 중인지, 아니면 기능 수행이 다 완료가 되어서, 기능 수행이 성공했는지 실패했는지 상태에 대해 이해하는 것이 중요하다.

• pending : operation 수행중 인 상태
• fulfilled : operation을 다 끝낸 상태
• rejected : file을 찾을 수가 없거나 네트워크에 문제가 생긴 상태

 

2. Data의 Produser와 Consumer에 차이점 알기

원하는 data를 제공하는 사람과 소비하는 사람의 두가지 다른 견해를 이해해야한다.

 

---

1. Producer

생성자를 보면 executor라는 callback함수를 전달 해주어야 한다. 

 

 

Promise 객체 생성

보통은 Promise안에서 heavy한 일 들을 하게 된다. 네트워크에서  data를 받아오거나 file에서 무언가 큰 데이터를 읽어 오는 과정은 시간이 꽤 걸린다. 그런 것을 synchronous로 처리하게 되면, 그 다음 라인의 code가 실행되지 않기 때문에 시간이 걸리는 operation은 Promise를 만들어서 비동기적으로 처리하는 것이 좋다.

 

Promise 객체를 만드는 순간, 생성시 만든 executor callback함수가 바로 시작되는 것을 확인 할 수 있다. 즉, Promise안에 네트워크 통신을 하는 코드를 작성했다면 Promise가 만들어지는 순간 바로 네트워크 통신을 시작하게 된다.

 

When new Promise is created, the executor runs automatically.

만약 네트워크 요청을 사용자가 요구했을 때만 해야되는 경우라면, 즉 사용자가 버튼을 눌렀을 경우에만 네트워크 요청을 해야한다면 위와 같이 코드를 작성하면, 사용자가 요구하지 않은 경우에도 네트워크 통신이 이루어지므로 불필요한 네트워크 통신이 이루어지게 될 수 도 있다.

 

위 Promise는 어떤일을 2초 정도 하다가 결국에는 resolve라는 callback함수를 호출하면서 'ellie'라는 값을 반환한다.

 

 

---

 

2. Consumers: then, catch, finally

 

promise 값이 정상적으로 잘 실행이 된다면, value를 받아와서 원하는 callback함수의 인자로 넣어준다. 여기서 value라는 인자는 Promise가 정상적으로 잘 수행이 되어서, 마지막으로 resolve callback 함수에서 전달된 'ellie'라는 값이 value로 들어간다.

 

then이라는 것은 promise가 정상적으로 수행이 잘되서 마지막에 최종적으로 resolve라는 callback 함수를 통해서, 전달한 값이 파라미터로 전달되어 들어온다.

 

만약 네트워크 통신을 하다가 무언가 실패했을 경우, reject callback함수가 호출된다. reject는 보통 Error라는 object를 통해서 값을 전달한다. Error라는 class는 JavaScript에서 제공하는 object중에 하나이다.

 

Error object에는 어떤 Error가 발생했는지 잘 명시해서 작성해야한다.

 

 

 

.then 을 이용해서 성공적인 경우만 promise로 다루기 때문에, Uncaugt도 잡히지 않은 error가 발생했다는 것이 출력 되는 것이다.

 

더이상 Uncaught error가 발생하지 않고, 받아온 error가 console.log에 출력되는 것을 확인할 수 있다.

 

promise에 then을 호출하게 되면, then은 결국 똑같은 proimse를 return하기 때문에 그 return된 promise의 catch를 등록할 수 있는 것이다. 이것을 Chaining이라고 한다.

 

 

Promise 객체 생성

promise object를 만들때, 비동적으로 실행하고 싶은 코드를 executor callback함수에 작성하고 나서, 성공적으로 잘 수행되었다고 하면 resolve callback 함수를 호출하게 되고, 실패했다면 reject callback함수와 실패에 원인을 담은  Error 객체를 전달하게 된다.

 

Promise 객체 사용

그렇게 생성된 promise객체를 이용할 때는 then과 catch를 이용해서 성공한 값 또는 실패한 error를 받아와서 원하는 방식으로 처리하면 된다.

 

최근에 Promise에 추가된 기능

 

finally 는 promise가 성공하고 실패하는 것과 상관없이, 무조건 마지막에 호출되는 메소드이다.

 

 

---

3. Promise chaining

1. then은 값을 바로 전달 할 수도 있고 아니면 promise를 전달해도 된다.

2. 비동기적이지 않은 것을 여러번의 then으로 묶어서 처리할 수도 있다.

 

---

4. Error Handling

 

 

코드를 깔끔하게 작성하는 Tip

callback 함수를 전달 할 때 받아오는 value를 다른 함수의 인자로 넣어 바로 호출하는 경우에는 생략으로 다음과 같은 형태로 코드를 작성해도 된다.

 

 

 

Error가 발생한 경우

 

Error를 Handling하는 방법

catch로 getEgg() 메서드 처리시 문제가 생긴다면, 다른 것으로 대체하는 코드를 작성하여, 부분적으로 문제가 생겨도전체적인 promise 체인에 문제가 발생하지 않도록 처리하는 것이다.

 

 

[출처 - https://youtu.be/JB_yU6Oe2eE]