Promise 이해하기

Promise란?

Promise는 우리가 콜백헬에서 허우적거릴 상황을 최소한으로 만들어줍니다.

비동기처리의 결과를 보여주는 객체형식이며 

Promise의 P는 항상 대문자로, 생성자라는 걸 의미합니다.

 

콜백헬이 뭔가요?

아래 예시를 보면 쉽게 이해가 가실 겁니다.

 

예시1

끝이 안보이는 }); }); }); ...........

예시2

출처: https://librewiki.net/wiki/%EC%BD%9C%EB%B0%B1_%EC%A7%80%EC%98%A5

위와 같은 코드는 프로세스의 성능 저하라는 단점이 있지만,

무엇보다도 본인에게도 해롭고, 코드를 공유할 동료들에게는 100배로 해롭습니다!

 

Promise의 resolve, reject

Promise로 새로운 콜백함수를 만든다면 

인자는 resolve, reject가 들어옵니다. 

new Object를 만들던 것과 같이 

Promise도 생성자이기 때문에 new Promise라는 문구를 사용합니다.

 

Promise 사용 연습을 위해 아이디 확인, 비밀번호 확인을 한 뒤

오랜만에 접속한 회원을 반기기까지 하는 코드를 만들어봅시다!

let ID = 'moonionn';
let password = 1234;
let DaysHaventLoggedIn = 80;

const logIn = new Promise((resolve, reject) => {
  if (ID === 'moonionn'){
    resolve('ID confirmed');
  } else {
    reject('this ID does not exist');
  }
});

Promise를 이용해 logIn이라는 새로운 객체를 생성했습니다.

이제 resolve에 성공 메세지, reject에 실패 메세지 를 넣으면 됩니다.

 

Promise의 then, catch

logIn
  .then((IDchecked) => {
    console.log(IDchecked)
  })
  .catch((IDnonExistent) => {
    console.error(IDnonExistent)
  });

Promise는 then 혹은 catch가 실행되기 전까지는 값을 내뱉지 않습니다!

then에는 resolve의 메세지, catch에는 reject의 메세지가 들어옵니다.

따라서 .then()의 IDchecked는 'ID confirmed' 메세지일 것이고

.catch()의 IDnonExistent는 'this ID does not exist'입니다.

 

어차피 위 코드는 무조건 성공하는 코드이기 때문에

(이미 id 값을 변수로 선언해두었기 때문)

resolve -> then의 흐름으로 가야 정상일 것입니다.

한 번 확인해봅시다!

 

//result: ID confirmed

Promise {<resolved>: undefined}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

정상적으로 ID 체크관문을 통과합니다!

그리고 Promise의 상태는 resolved가 되어있는걸 확인할 수 있습니다.

 

이번에는 then을 여러개 사용해 비밀번호를 확인하고

고객이 얼마나 오랜만에 접속했는지 체크해봅시다.

new Promise를 리턴해주면 해당 Promise의 resolve값이 다음 then의 인자로 들어갑니다.

logIn
  .then((IDchecked) => { //IDchecked는 'ID confirmed'
    console.log(IDchecked);
    
    return new Promise ((resolve, reject) => { //새로운 Promise
      if (password === 1234){
        resolve('Welcome! customer!');
      } else {
        reject('Wrong password!');
      };
    });
  })
  
  .then((logInSuccess) => { //logInSuccess는 'Welcome! customer!'
    console.log(logInSuccess);
    
    return new Promise ((resolve, reject) => { //새로운 Promise
      if (DaysHaventLoggedIn >= 30) {
        resolve(`We've missed you!!!!`)
      };
    });
  })
  
  .then((longGoneCustomer) => { //longGoneCustomer는 `We've missed you!!!!`
    console.log(longGoneCustomer)
  })
  .catch((passwordWrong) => {
    console.error(passwordWrong)
  });
  
/* 콘솔창 결과
ID confirmed
Welcome! customer!
We've missed you!!!!
*/

 

지정된 password가 아닌 다른 password를 치면

'Wrong password!' 메세지와 함께 에러가 뜹니다.

 

무조건 resolve되거나 무조건 reject 되는 Promie는 아래와 같이 처리합니다.

const resolveAll = Promise.resolve('SUCCESS');

const rejectAll = Promise.reject('FAIL');