[JavaScript] 프로미스에 대해 알아보자 Promise

들어가며

콜백지옥이라는 것을 들어본 적이 있는지?

ES6이 도입되기 이전에 비동기 작업을 하기 위해서는 콜백함수로 처리했다고 한다.
비동기 작업으로 처리해야하는 일이 많아질수록 함수가 점점 더 깊어지게 되는데,
이를 흔히들 콜백지옥, 콜백 헬 callback hell 이라고들 부른다.

이런 웃픈 짤도 돌아다닌다. 출처: https://imgur.com/FDzn5s0

위의 짤만 보아도 얼마나 가독성이 좋지 않은지...😇  연결을 파악하기가 쉽지 않다는 것을 알 수 있다.

이런 콜백 지옥을 피할 수 있는 방법이 몇가지 있는데, 이 글에서는 프로미스 Promise에 대해 써보고자 한다.

 

 

프로미스

프로미스는 ES6에서 도입된 객체로, 비동기 처리 상태와 처리 결과를 반환하는 객체이다.
비동기 처리를 했을 때 작업이 성공이든, 실패이든 결과를 반환해준다.
아래와 같은 형태로 new 연산자를 통해 선언할 수 있다.

const promise = new Promise((resolve, reject) => {
    // 비동기 처리 수행

    if(처리에 성공하는 조건){
        resolve('처리 성공');    
    } else{
        reject('처리 실패');
    }

});

 

인수로 받은 비동기 처리를 하여 프로미스의 상태에 따라 성공할 때는 resolve, 실패할 때는 reject를 호출한다.
프로미스의 상태는 비동기 처리의 진행여부를 보여주는 정보인데 아래처럼 세 가지 경우가 있다.

 

프로미스의 상태

• Pending (대기) : 비동기 처리 수행이 아직 되지않은 상태. 프로미스의 기본 상태.
• Fulfiled (성공) : 비동기 처리 수행이 성공한 상태. resolve 함수를 호출한다.
• rejected (실패) : 비동기 처리 수행이 실패한 상태. reject 함수를 호출한다.

비동기 처리에 따라서 프로미스의 상태가 성공하여 fufilled가 되었다던가, 실패하여 rejected가 되었다면 함수가 호출된다.

호출되는 함수로 프로미스의 상태가 결정되기 때문에 이 함수에 대한 처리가 필요하다.

이 함수가 비동기 처리에 대한 후속처리를 한다는 점에서 콜백지옥을 해결한다고 할 수 있다.

이런 처리역할을 하는 후속 메서드로는 세 가지가 있다.

 

프로미스의 후속 메서드

• .then() : 프로미스가 성공(fufilled)한 상태일 때 호출된다.
• .catch() : 프로미스가 실패(rejected)한 상태일때만 호출된다. 에러를 처리하는 메서드.
• .fianlly(): 마지막에 공통으로 처리할 내용을 수행하는 메서드. 한 번만 호출될 수 있다.

위 세 메서드는 항상 프로미스를 반환한다는 공통점이 있다.
또 메서드체이닝을 통해 이전 처리의 값을 전달받으며 연속적으로 호출할 수 있다.

 

 

프로미스의 처리 과정. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

프로미스의 후속 메서드 체이닝 과정을 도식화 하면 위와 같이 표현된다.

 

 

간단 예시

메서드 체이닝으로 프로미스를 간단하게 사용해보았다.

const printNumber = (num) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(num);
      num++;
      if (num <= 5) {
        resolve(num);
      } else {
        reject(`${num}은 5보다 큰 수.`);
      }
    }, 2000);
  });
};

printNumber(3)
  .then((num) => {
    return printNumber(num);
  })
  .then((num) => {
    return printNumber(num);
  })
  .catch((rej) => console.log(rej))
  .finally(() => console.log('끝'));

브라우저 콘솔에서 실행하면 위와 같이 2초씩 딜레이되며 결과가 나온다.

이제 프로미스로 콜백지옥에서 벗어나 좀 더 명시적이고 깔끔하게 비동기 처리를 해보자!~