[011] 자바스크립트 (JavaScript) - Promise 사용

안녕하세요~ totally 개발자입니다.

 

Promise

 

오늘 다룰 부분은 Promise입니다. 이 Promise는 비동기 프로그래밍에서 사용되는 객체로 비동기 연산이 종료된 후에 결과 값을 반환할 수 있도록 하는 약속을 위한 객체입니다. 즉 동기 메소드처럼 값을 반환합니다. 

 

이 Pormise에는 3가지 상태가 존재합니다.

1) Pending (대기): 초기 상태

2) Fulfilled (이행): 성공적으로 이행됨.

3) Rejected (거부): 이행 실패.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

const promiseObject = new Promise((resolve, reject) => {
  setTimeout(() => resolve("3초 뒤에 이 함수를 실행하는 Promise의 resolve 함수"), 3000);
});

promiseObject.then((message) => console.log(message));

위에 기본 예시를 작성해놓았습니다. Promise에는 resolve, reject 함수를 인자로 받을 수 있습니다. resolve 함수에 메시지를 작성해놓고 그 메시지를 then의 인자로 전달할 수 있습니다. 이 then은 첫 번째, 두 번째 인자를 받을 수 있는데 첫 번째 인자로는 아래 스크린샷 찍은대로 onfulfilled 즉 성공한 resolve 함수, 두 번째 인자로는 onrejected 즉 실패한 reject 함수의 인자를 전달할 수 있습니다. 

 

Promise의 then의 parameter 설명

 

이번에는 reject 함수를 의도적으로 호출해보도록 하겠습니다.

 

new Promise((response, reject) => {
  setTimeout(() => reject("오류가 발생했습니다."), 3000);
}).then(() => console.log("resolve 함수 즉 성공했습니다."), (message) => console.log("reject 함수 즉 실패했습니다."))

이렇게 then에 2개의 parameter 값을 넣었고 위 setTimeout에는 reject 함수만 호출해주었습니다.

 

실행 콘솔 화면

콘솔에서 테스트해보았을 때 위처럼 "reject 함수 즉 실패했습니다."가 출력되는 것을 알 수 있습니다. Promise에는 Promise.all과 Promise.race도 있으며 Promise.all은 거부 상태에 있을 때에는 그 즉시 반환되고 보통 작업들이 모두 완료된 이후에 배열로 반환되지만 race는 가장 빠르게 완료된 것을 결과로 반환합니다. 

 

그리고 저번 시간에 reduce 함수에 대해 살펴보았습니다. 이 reduce함수와 Promise 객체를 같이 활용할 수도 있습니다. 먼저 studentNumbers 배열을 선언해주고 그 다음에 studentNumberPromise로 이름한 Promise 객체를 반환하는 변수를 선언해주었습니다. 1초 뒤에 실행할 수 있는 setTimeout 함수를 선언하고 resolve 함수를 호출해주었고, 마지막에 studentNumbers 배열에 reduce 함수를 실행시켜 acc에 계속 배열의 요소가 들어가고 nextNumber를 다음 인자로 전달함으로써 학생 ${nextNumber}에 변수를 연속해서 전달할 수 있습니다. 

const studentNumbers = ["A12", "B20", "C30", "D45"];

const studentNumberPromise = (nextNumber) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`학생 ${nextNumber}번, 출석 체크 완료!`);
      resolve();
    }, 1000);
  });
};

studentNumbers.reduce((acc, nextNumber) => {
  return acc.then(() => studentNumberPromise(nextNumber));
}, Promise.resolve());

 

콘솔 실행 모습

다음 시간에는 await, async에 대해서 그리고 Promise와 같이 사용하는 방법에 대해서도 같이 알아보겠습니다.