[JS ES6]-[19] 동기, 비동기 핵심만 이해하기(3) - promise(프로미스)

 

안녕하세요.

이번 글에서는 자바스크립트에서의  promise(프로미스) - (동기, 비동기) 핵심만 알려드리겠습니다.

 

1. 사용이유

콜백함수와 마찬가지로 순서대로 코드를 짜고 싶을 때 사용합니다.

하지만 콜백함수보다 좋은 이유가 크게 2가지가 있습니다.

1. 코드 가독성이 향상됩니다.
2. 에러 처리가 가능합니다(catch)

 

 

예를 들어 2개의 함수를 순서대로 실행시켜 보겠습니다.

const say_1 = () => {
  setTimeout(() => {
    console.log('1');
  }, 0)
}
const say_2 = () => {
  console.log('2');
};

say_1();
say_2();  //2  1

코드에서 원한 건 1과 2가 순서대로 출력되는 것이었지만,

say_1안엔 비동기함수 setTimtout이 있어서 2,1이 출력됩니다.

promise로 순서대로 실행시켜 보겠습니다.

 

 

const say_1 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('1');
    resolve();
  }, 0);
})
const say_2 = () => {
  console.log('2');
}

say_1.then(() => {
  say_2();
});  // 1 2

1,2 가 순서대로 출력됩니다!

지금 위 코드를 이해하지 못하셔도 됩니다. 뒤에서 설명해 드릴게요!

 

2. 사용방법

const promise = new Promise();

promise.then(() => {

}).catch(() => {

})

위처럼 new Promise()로 새로운 Promise객체를 생성하시면 됩니다.

 

 

promise는 에러처리가 가능하다고 했었죠?

Promise안에 코드가 성공하면 then, 실패하면 catch 내의 코드가 실행되어 에러처리가 가능합니다.

 

 

그래서 promise를 이용하면, 성공여부를 판별해야 하는 코드를 다 넣을 수 있습니다.

예를 들어 서버에서 데이터를 잘 받아왔는지(ajax) 같은 게 있겠네요.

 

3. resolve와 reject

성공, 실패를 판정하는 방법은 resolve, reject를 이용하면 됩니다.

 

 

성공하면 resolve, 실패하면 reject를 사용하면 됩니다.

아래 코드는 resolve()를 실행하니 무조건 then안의 코드가 실행됩니다.

const promise = new Promise((resolve, reject) => {
  resolve();
});

 

 

그리고 resolve, reject안에 값을 넣어주면, then 함수 안에서 파라미터 형태로 사용하실 수 있습니다.

const promise = new Promise((resolve, reject) => {
  let calculation = 1+1;
  resolve(calculation);
});

promise.then((result) => {
  console.log(result);  //2
})

 

4. 예시로 이해하기

저는 3000원짜리 컵라면을 사려고 합니다. (비싸네요)

근데 요즘 물가에 한 끼 3000원이면 괜찮은 거 같기도 하네요.

 

 

제 돈 여부에 따라 물건을 살 수 있을지를 계산하는 코드를 짜보겠습니다.

const money = 1000;

const buy_ramen= (money) => {
  return new Promise((resolve, reject) => {
  //라면 가격을 계산하는게 복잡한 비동기 코드라고 가정하고 setTimeout으로 대체 
    setTimeout(() => {  
      if(money >= 3000){
        resolve('구매');
      } else {
        reject('실패');
      }
    }, 1000);
  });
};

buy_ramen(money).then((result) => {
  console.log(`${result} 했습니다.`); 
}).catch((result) => {
  console.log(`${result} 했습니다.`);  //실패했습니다.
});

promise를 반환하는 buy_ramen이라는 함수를 만들었습니다.

그리고 money 파라미터 값을 받아와서 계산 후

3000원보다 많으면 resolve, 작으면 reject를 실행시켰습니다.

 

 

여기서 money는 3000원보다 작으니 reject가 실행되고 결국 catch안에 구문이 실행되겠네요.

 

4. Promise의 상태

new Promise()로 생성된 변수를 콘솔창에 찍어보면, 이상한 값이 나옵니다.

여기서 보이는 PromiseState란 값이 promise의 상태 값이고, 3가지의 상태를 가집니다.

1. Pending(대기) - 성공/실패 판정 전
2. Fulfilled(이행) - 성공 후 
3. Rejected(실패) - 실패 후