JS (ES6 & above) - Promise

■ Promise를 사용할 때 개념

1) State :

request 관련 heavy한 work를 수행중인지, 아니면 끝난지 여부

- pending → fulfilled or rejected

 

2) Promie Object 의 Producer & Consumer

- producer :  원하는 데이터 생산

- consumer : 생산된 데이터 사용자

 

 

■ Producer

- new Promise class를 이용하여 생성

- resolve, reject callback을 인자로 받아서 사용

- executor 부분은 바로 run 하므로 network 통신은 event 등에 엮으려면, 주의해햐 함

// when Promise is created, the executer runs Automatically
const promise = new Promise((resolve, reject)=>{
  // do some heavy work
  // ex) data reading from network ...

  //executer
  console.log('doing something...'); // promise const에 할당 순간, 바로 실행
  setTimeout(()=>{
    resolve('ellie!'); // when success

  }, 2000);
});

 

 

■ Consumer

1) resolve - then

- resolve에서 return 값은 then으로 받아온다

- then 메써드에서 다른 Promise 전달 가능

const promise = new Promise((resolve, reject)=>{
  // do some heavy work
  // ex) data reading from network ...

  //executer
  console.log('doing something...'); // promise const에 할당 순간, 바로 실행
  setTimeout(()=>{
    resolve('ellie!'); // when success

  }, 2000);
});

promise.then((value)=>{
  console.log(value);
});

>>>
ellie!  // after 2 seconds

2) reject - catch

- reject return은 new Error object 생성 등으로 생성하고, catch로 받아온다

const promise_error = new Promise((resolve, reject)=>{
  console.log('error is about to happen...');
  setTimeout(()=>{
    reject(new Error('no network!'));
  }, 2000);
  
});


promise_error.catch((error)=>{
  console.log(error);
});

>>>
error is about to happen...
Error: no network!

    ...
    
    at new Promise (<anonymous>)
    
    ...
    

3) finally

- 성공/실패 여부에 상관없이 마지막에 무조건 실행

- 마지막에 반드시 사용하고 싶은 로직 등을 추가할 수 있음

---

※ 다음과 같은 chaning 가능

promise
    .then( ... )
    .catch( ... )
    .finally( ... )

 

 

■ Promise chaning

1) 예시 :

- then은 다른 Promise( 서버랑 추가 통신 등... ) 을 return 가능

- Arrow function

() => { ... } // 인수가 없을 때
x => { ... } // 인수가 하나 일 때
(x, y) => { ... } // 인수가 여러 개일 때

x => { return x * x }  // 블록을 사용한 방식
x => x * x  // 표현식이며 위와 같음

const fetchNumber = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve(1);
  }, 1000);
});

fetchNumber  // num 1 param means same as  (num)
  .then(num => num * 2)
  .then(num => num * 3)
  .then(num => new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(num-1);
    }, 1000);
  }))
  .then(num => console.log(num));
  
  >>>
  5

 

 

■ Error Handling

1) 예제 :

- successful 한 서버 통신

  //4. Error handling
const getHen = () => {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Hen!');
    }, 1000);
  });
};

const getEgg = (hen) => {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(`${hen}=>Egg!`);
    }, 1000);
  });
};

const cook = (egg) => {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(`${egg}=>Omlet!`);
    }, 1000);
  });
};

getHen() // 자체가 Promise가 아니고, 함수가 수행되어야 Promise를 받으므로
  .then(hen => getEgg(hen))
  .then(egg => cook(egg))
  .then(meal => console.log(meal));
  
  >>>
  Hen!=>Egg!=>Omlet!

---

2) error catch는 chaning 마지막에 수행하면 잡아낼 수 있음

...

const getEgg = (hen) => {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      //resolve(`${hen}=>Egg!`);  // 이부분 에러
      reject(new Error(`error with ${hen}=>Egg!`));
    }, 1000);
  });
};

...

getHen() // 자체가 Promise가 아니고, 함수가 수행되어야 Promise를 받으므로
  .then(hen => getEgg(hen))
  .then(egg => cook(egg))
  .then(meal => console.log(meal))
  .catch(egg => console.log(egg)); // 에러 catch

>>>
Error: error with Hen!=>Egg!

---

3) fallback을 위해 chaining 중간에 catch 구문 사용

> 중간 chaining 때문에 (2)번과 다르게, 마지막 catch에는 가지 않고

> 중간 catch에서 fallback으로 다른 인자를 사용할 수 있게 됨

getHen() // 자체가 Promise가 아니고, 함수가 수행되어야 Promise를 받으므로
  .then(hen => getEgg(hen))
  .catch(error => {
    console.log('for fallback : ',error);
    return 'Bread!';
  })
  .then(egg => cook(egg))
  .then(meal => console.log(meal))
  .catch(egg => console.log(egg));
  
>>>
for fallback :  Error: error with Hen!=>Egg!
    at Timeout._onTimeout
Bread!=>Omlet!

 

 

※ then / catch / finally

등의 인자가 1개인 경우, 생략할 수 있음

1) before

getHen()
  .then(hen => getEgg(hen))
  .catch(error => {
    console.log('for fallback : ',error);
    return 'Bread!';
  })
  .then(egg => cook(egg))
  .then(meal => console.log(meal))
  .catch(egg => console.log(egg));

2) after

> 명시적으로 받는 인자가 1개에, 동일할 때 사용 - 코드가 더 깔끔

> 만약 변수를 받아서 써야한다면 명시해주어야 함

getHen() // 자체가 Promise가 아니고, 함수가 수행되어야 Promise를 받으므로
  .then(getEgg)
  .catch(error => {
    console.log('for fallback : ',error);
    return 'Bread!';
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);

---

참조 :

www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12