promise 의 리턴값과 then

---

프로미스

---

예 :

내가 슈퍼스타 가수라고 가정해보자 나는 노래부르눈 이채야채 🎤

다음앨범을 기다리는 이채야채의 팬들에게..카카오톡으로 내 채널을 추가하라고해주고(구독리스트) 자동으로  앨범이나오거나 중요사항이있으면 연락이 가도록 하는 프로세스를 만든다고 해보자

 

 

'제작 코드(producing code)'는 원격에서 스크립트를 불러오는 것 같은 시간이 걸리는 일을 한다.

소비 코드(consuming code)'는 '제작 코드’의 결과를 기다렸다가 이를 소비한다. 

프라미스(promise) 는 '제작 코드’와 '소비 코드’를 연결해 주는 특별한 자바스크립트 객체다.

위 비유에서 프라미스는 '구독 리스트’. '프라미스’는 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드’(이채야채의 앨범)가 준비되었을 때, 모든 소비 코드가 결과를 사용할 수 있도록 해준다.

 

let promise = new Promise(function(resolve, reject) {
  // executor (제작 코드, '가수')
});

 

executor는 new Promise가 만들어질 때 자동으로 실행된다.

결과를 최종적으로 만들어내는 제작 코드를 포함한다. 위 비유에서 '가수’ == '이채야채' 가 바로 executor 즉 실행자다.

여기서 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백. resolve -> 성공, reject-> 실패

 

• resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
• reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

async await은 promise가 응답할 때까지 기다려서 동기적으로 코드가 작동할 수 있게 해준다.

const comongFunc = async () => {
  await new Promise(r => setTimeout(r, 1000))
  return 'hi im Comong'
}

위의 코드를 실행하면 어떻게 될까?

 

콘솔창에다가 직접 실행을 시켜봤다.

꼬몽함수를 실행했을때는 

Promiser객체가 뜬다. 결국 결과값으로는 return값이 아닌 프로미스 객체를 리턴한다.

 

---

프로미스 체이닝

---

콜백에서 콜백헬이 있는것을 => 프로미스체이닝이 좀더 깔끔하게 정리가된다 => async await은 좀 더 깔끔하게!

 

프로미스 체이닝은 .then, .then으로 계속해서 받는것을 의미한다.

아래로 내려가는 형태여서 콜백보다 가독성이 좋다는 장점이있다.

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

1. 1초 후 최초 프라미스가 이행. – (*)
2. 이후 첫번째 .then 핸들러가 호출. –(**)
3. 2에서 반환한 값은 다음 .then 핸들러에 전달. – (***)
4. 이런 과정이 계속 이어진다.

프라미스 체이닝이 가능한 이유는 promise.then을 호출하면 프라미스가 반환되기 때문이다. 반환된 프라미스엔 당연히 .then을 호출할 수 있다.한편 핸들러가 값을 반환할 때엔 이 값이 프라미스의 result가 됩니다. 따라서 다음 .then은 이 값을 이용해 호출된다.

 

프로미스 체이닝의 예시를 살펴보면

const promise = doSomethingAsync();
// promise는 Promise 인스턴스
​
promise
   .then(doSomething1)
   .then(doSomething2)
   .catch(handleError)
   .then(doSomething3)
   ...
   .finally(finishLine)

.catch로 받아져도 아래 .then이 있다면 에러 처리를 한 후 -> 프로미스객체이면 .then으로 다시 받을 수가 있다.

 

.then().then()으로 체이닝할경우 .then()이 실패하면 밑으로 내려가지 않는다.  catch를 통해서는 받을수있다. 

또한 catch로 받은 후에는 다시 .then()으로 이을 수 있다.