프라미스 Promise 란 무엇인가?

 

프라미스란? 

자바스크립트 비동기 처리에 사용되는 객체이다.

 

비동기 연산이 종료된 이후 결과 값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있어 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 값을 반환하는 것이 아니고 프라미스를 반환해서 미래의 어떤 시점에 결과를 제공한다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.  

 

프라미스가 필요한 이유는? 

자바스크립트의 비동기 처리의 문제점을 해결하기 위해 사용한다. 

 

 

 

 

---

 

프라미스(promise)는 프로듀서와 컨슈머를 연결해 주는 자바스크립트 객체이다.

따라서 정보를 제공하는 프로듀서(producer)와 정보를 소비하는 컨슈머(consumer)를 잘 알아야 한다.

 

프로듀서(producer)

프라미스는 class이기 때문에 new라는 키워드를 이용해 object를 생성한다.

프라미스의 생성자는 실행자(executor)라는 콜백 함수를 전달해 주어야 하는데 이때의 콜백 함수는 또 다른 두 가지의  콜백 함수 reject와 resolve를 받는다. 

• resolve :기능을 정상적으로 수행해서 마지막으로 최종 데이터를 전달하는 함수
• reject : 기능을 수행하다가 중간에 문제가 생기면 호출하게 될 함수

 

resolve와 reject를 인수로 받는 실행자 함수를 만들어 주면 프라미스가 완성된다. 

resolve와 reject는 자바스크립트가 자체적으로 제공하는 콜백이기 때문에 개발자는 이 콜백 함수들을 신경 쓰지 않고 실행자 함수 안의 코드만 작성하면 된다. 다만 둘 중 하나는 반드시 호출해야 한다. 

 

여기서 주의해야 할 점은 실행자 함수는 new Promise가 만들어질 때 그 순간 자동으로 실행된다는 점이다. 만약 네트워크 요청을 사용자가 했을 때만 해야 하는 경우라면, 즉 사용자가 버튼을 눌렀을 때 요청을 해야 하는 경우라면 사용자가 요구하지도 않았는데 불필요한 요청을 하게 될 수 있다. 그래서 프라미스가 만들어지는 순간 실행이 된다는 점을 유의하면서 사용해야 한다. 

 

프라미스의 3가지 상태 (states)

프라미스의 상태란 프라미스의 처리 과정을 의미한다. 프라미스가 만들어지고 종료될 때까지 3가지의 상태를 갖는다. 

이행(resolved)되거나 실패(rejected) 한 상태의 프라미스는 ‘처리된(settled)’ 프라미스라고 부른다. 반대되는 프라미스로 '대기(pending)'상태의 프라미스가 있다.

 

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 프로세스를 진행하는 중인 상태이다. 
• new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고 콜백 함수의 인자는 resolve, reject이다.
• Fulfilled(이행): 비동기 처리가 완료되어 프라미스가 결과 값을 반환해 준 상태이다.  콜백 함수의 인자 resolve를 실행하면 이행(Fulfilled) 상태가 된다. 이행 상태가 되면 .then()을 이용해서 처리 결과 값을 받을 수 있다. 
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태이다. 파일을 찾을 수 없거나 무언가 문제가 생기면 Rejected가 된다. 또 reject()를 호출하면 실패(Rejected) 상태가 된다. 실패 상태가 되면 실패 처리의 결과 값을 catch()로 받을 수 있다.   

컨슈머(consumer) 

프로듀서가 제공하는 정보를 기다렸다가 이를 소비한다. then, catch, finally를 이용해서 값을 받아올 수 있다. 

 

• then : 프라미스가 정상적으로 잘 수행이 되어서 마지막에 최종적으로 resolve라는 콜백 함수를 통해서 전달한 값을 함수의 인수로 전달받아 가져올 수 있다. .then()의 첫 번째 인수는 실행 결과를 받아 프라미스가 이행됐을 때 실행되는 함수이다. 두 번째 인수는 프라미스가 실패했을 때 에러를 받아 실행되는 함수이다. 성공된 처리만 다루고 싶다면 .then()에 인수를 하나만 전달해도 된다. 
• catch : 에러가 발생했을 때 어떻게 처리할 건지 콜백 함수를 작성해주면 된다. 그러면 더 이상 에러가 발생하지 않고 우리가 작성한 에러가 console.log에 출력된다. 
• finally: 성공하든 실패하든 무조건 마지막에 호출된다.결과가 어떻든 마무리로 어떤 기능을 수행하고 싶을 때 사용한다. ( ex) 성공 여부와 상관없이 로딩 화면을 중지한다 ) 

 

 

 

---

 

프라미스 체이닝 

프라미스에 댄을 호출하게 되면 똑같은 프라미스를 리턴하기 때문에 그 리턴된 프라미스의 캐치를 다시 호출할 수가 있다.

이렇게 여러 개의 프라미스를 연결하여 사용하는 것을 체이닝이라고 한다. 

프라미스에서의 에러 처리 

프라미스 에러 처리 방법은 두 가지이다. 

1. .then()의 두 번째 인자로 에러를 처리하는 방법
2. .catch()를 이용하는 방법

두 방법 모두 reject() 메서드가 호출되어 실패 상태가 된 경우에 실행된다. 

하지만 가급적이면 .catch()를 사용하도록 권장하고 있다. .then()의 두 번째 인자로 에러를 처리한다면 첫 번째 콜백 함수의 내부에서 오류가 나는 경우, 오류를 잡지 못하게 되는 문제점이 생긴다. 하지만 .catch()를 이용하면 .then()의 에러가 전달되어 catch로 에러를 처리해 줄 수 있다. 

 

 

 

 

 

 

 

 

 

 

 

reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://ko.javascript.info/promise-basics

www.youtube.com/watch?v=JB_yU6Oe2eE