/ JAVASCRIPT

프로미스(Promise)에 대해서

JavaScript 관련 글입니다.




이번 글에서는 Promise에 대해서 정리해보겠습니다.

Promise


프로미스는 다음과 같이 new 키워드를 통해서 만들 수 있습니다.

const promise = new Promise();

이 promise옆에 .then()을 붙일 수 있습니다. 이것에 대해서 더 알아보도록 하겠습니다.

const promise = new Promise();

promise
    .then(() => {
        console.log('성공!');
    })
    .catch(() => {
        console.log('실패!');
    })

프로미스 옆에 .then()이나 .catch(), 그리고 .finally()를 붙여서 코드를 작성할 수 있습니다.
각각의 의미는 다음과 같습니다.

  • then() 안에는 어떤 코드가 성공했을 경우 실행할 함수를 넣습니다. 성공 시에 실행되는 코드를 담으면 됩니다.
  • catch() 안에는 어떤 코드가 실패했을 경우 실행할 함수를 넣습니다. 실패 시에 실행할 코드를 담습니다.
  • finally()는 성공이나 실패 여부에 상관 없이 무조건 실행되는 코드를 담습니다.


자, ‘성공시에는 이러한 코드, 실패시에는 이러한 코드를 실행시켜주는 구나.’ 라는 것은 알겠는데 성공할 지 실패할 지 어떻게 판단할까요?
바로 Promise가 성공과 실패를 판정하는 역할을 합니다.

const promise = new Promise((resolve, reject) => {
    // 이 곳에 resolve(); 또는 reject();를 쓰면 각각 성공과 실패가 판정됩니다.
});

promise
    .then(() => {
        console.log('성공!');
    })
    .catch(() => {
        console.log('실패!');
    })

위의 코드에서 new Promise()안에 함수를 넣을 수 있고, 파라미터는 resolve(성공), reject(실패)를 가지게 됩니다. 이후 resolve()를 써주면 성공, reject()를 쓰면 실패가 판정됩니다.

간단한 활용 예시를 더 알아보겠습니다.

const promise = new Promise((resolve, reject) => {
    let a = 2 + 2;
    if (a > 3) resolve(a);
    else reject(a);
});

promise
    .then(() => {
        console.log('성공!');
    })
    .catch(() => {
        console.log('실패!');
    })

Promise안에서 a 라는 변수에 2 + 2 연산을 하고 저장하였습니다. a의 값은 4가 될 것입니다.
그 밑에 if를 사용하여 연산값인 a가 3 이상일 경우 resolve(a); 그렇지 않다면 reject(a);를 하게 만들었습니다.
a의 값은 4고, 3보다 크기 때문에 resolve(a);가 실행되어 ‘성공’이 판정됩니다.


따라서 then()안에서 정의했듯, 콘솔에 ‘성공!’ 이라는 메세지가 출력되게됩니다.

정리하자면, Promise는 성공/실패를 판정해주는 데 사용하며, then()과 catch()를 통해서 이후의 코드를 실행해주는 일종의 디자인 패턴입니다.

Promise의 상태


Promise는 상태라는 것을 가집니다.
new Promise()로 생성된 변수를 출력해보면 현재 ‘상태’를 알 수 있습니다.

  • 성공/실패 판정 전에는 상태 (대기)
  • 성공 이후에는 상태 (성공)
  • 실패 이후에는 상태 (실패)

실제로 Promise를 출력해보면 현재 상태를 알수 있습니다.

정리하면 프로미스 오브젝트는 3가지 상태(pending, resolved, rejected)를 가집니다. 참고로 성공을 실패나 대기 상태로 되돌릴 수는 없습니다.



End.