[자바스크립트] 프로미스(Promise)의 개념과 사용

Promise

Promise 객체에는 state 와 result가 있다

Promise가 만들어 지면

• state : pending
• result : undefined

상태이다

 

Promise 생성은 생성자 new를 사용해서 생성

인자로는 resolve, reject 콜백함수가 있다

resolve는 성공했을때 실행하는 함수

reject는 실패했을때 실행하는 함수다

실제로 생성해서 각각 실행해 보면

 

resolve함수에 "success"를 넣고 생성하면

• state : fulfilled
• result : "success"

로 바뀐다

 

반대로 reject함수에 "fail"를 넣고 생성하면

• state : rejected
• result : "fail"

로 바뀐다

 

이렇게 실행해도 되지만 함수로 만들어서 실행해도 된다

 

 

예제 만들기

 

혼자 예시를 만들면서 해보면 이해하기 쉬울 것 같아서 퀴즈게임 비슷하게 만들어 보기로 했다

일단 javascript 에서 html 없이 input을 받는 prompt를 사용했다

 

prompt(1 + 1) 을 하면 나오는 창

 

2를 입력하면 result에는 '2'가 들어간다

result == (1+1) ? res(result) : rej("오답")

Promise 안에 result가 정답이면 resolve

오답이면 reject가 실행되게 한다

 

Promise를 리턴하는 함수 실행, 2를 입력했을 떄, 3을 입력했을 때 결과값

 

Promise는 then을 이용해 resolve() 와 reject() 처리를 한다

then을 사용해 question1의 결과를 출력

result에 2를 가져오는 것을 확인할 수 있다

그럼 이 then을 이용해 Promise를 체이닝해서 문제가 정답일때 다른문제가 나오게 한다

alert 추가한 두번째 문제

then으로 체이닝해서 실행하면

정답일때 result를 question2에 인자로 실행시켜 정답을 알려주고 다음문제가 나온다

이렇게 question3 도 만들어서 반복한다

question1()
  .then((result) => question2(result))
  .then((result) => question3(result))
  .then((result) => {
    alert(`${result} 정답`);
  })
  .catch((err) => {
    alert(err);
    window.location.reload();
  });

다 맞혔을때 최종적으로 정답이라는 결과가 나오고

중간에 오답이 나오면 catch로 alert 오답과 새로고침을 한다

 

그 밖에도 Promise를 이렇게 순차적으로 실행하는 것 말고

병렬적으로 실행하고 싶을 때는 Promise.all(), Promise.race() 사용하면 된다

 

Promise.all([])

배열 형태로 Promise를 return하는 함수를 넣어주면 동시에 함수들이 실행된다

주의할점은 하나라도 실패가 나오면 모든값을 얻을 수 없다

 

Promise.race([])

all과 같이 배열형태로 넣어주면 동시에 실행 된다

먼저 실행되는 것이 먼저 리턴한다

중간에 하나가 실패하더라도 그 전에 실행된 값은 얻을 수 있다