Promise에 대해 ?

Promise 라는 것은,,,

Promise 자바스크립트에서 비동기 처리를 간편하게 할 수 있도록 도와주는 객체입니다. 비동기 처리는 특정 코드의 실행이 완료 될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 의미한다. 

https://velog.io/@hayyim0626/TIL-Promise

 

Promise 의 역할

Promise는 주로 웹 구현 시 원활한 데이터 통신을 위해 활용된다. 서버에 데이터를 요청했을 때 , 데이터를 모두 받아보기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용된다.

 

Promise 의 처리 과정(상태)

Promise 객체가 생성되고 종료될 때까지 아래와 같이 3가지 처리과정을 가진다.

 

1. Pending : 대기 ( Promise 객체가 생성되고 초기 상태)
2. Fulfilled : 이행 (비동기 로직 처리가 완료된 상태로 Promise  결과값 반환 상태/성공)
3. Rejected : 실패 (비동기 로직 처리의 실패 또는 오류 상태/실패)

아래 예시로 든 코드는 1초 후에 무작위로 생성된 숫자를 평가하고 0.5보다 크면 resolve를 호출하여 이행상태로 전환하고 그렇지 않으면 reject를 호출하여 거부 상태로 전환하는 코드이다.

// Promise 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행 (예: setTimeout을 사용한 가상의 비동기 작업)
  setTimeout(() => {
    const randomNumber = Math.random();
    
    if (randomNumber > 0.5) {
      // 이행 상태로 전환
      resolve(randomNumber);
    } else {
      // 거부 상태로 전환
      reject(new Error('Random number is less than 0.5'));
    }
  }, 1000);
});

// Promise 사용
myPromise
  .then((result) => {
    console.log('이행됨:', result);
  })
  .catch((error) => {
    console.error('거부됨:', error.message);
  });

 

코드들을 자세히 살펴보면

 

• new Promise((resolve,reject)=>{. . .}) : Promise 객체를 먼저 생성하고 생성자 함수 내에서 비동기 작업을 수행한다.
• setTimeout : 가상의 비동기 작업을 나타냅니다. 1초 후에 작업이 수행된다.
• Math.random() : 0에서 1사이의 무작위 숫자를 생성한다.

Promise 생성 단계에서는 무작위로 생성된 숫자가 0.5보다 크면 resolve를 호출하여 Promise를 이행 상태로 전환하고 그보다 작으면 reject를 호출하여 Promise를 거부 상태로 전환한다.

 

다음으로 코드를 계속 살펴보면

• myPromise.then((result) => {...}) : Promise가 이행될 경우 실행될 콜백 함수를 정의 한다. 여기서 result는 resolve 함수에 전달된 값이다.
• myPromise.catch((error) => {...}) : Promise가 거부될 경우 실행될 콜백 함수를 정의 한다. 여기서 error는 reject 함수에 전달된 오류 객체이다. 

이러한 구조를 통해 비동기 작업의 성공 또는 실패에 대한 처리를 명확하게 할 수 있다. 이게 Promise의 기본적인 동작원리이다. 

 

위 코드를 실행해서 성공적으로 이행하면 다음과 같은 결가 나오고 

 

이행됨: 0.9023121317558638

 

실패하면 

 

tese.html:32 거부됨: Random number is less than 0.5

 

와 같은 결과가 나온다.

 

Promise.all() 

 

Promise.all() 는 여러개의 promise를 배열로 받아들여 모든 promise가 이행 될때까지 기다린 후 모든 promise의 결과를 배열로 반환하는 유틸리티 함수이다. 만약 배열에 있는 어떤 Promise라도 거부 상태가 되면 Promise.all은 해당 거부를 반환한다. 

 

Promise와 많이 비교되는 콜백 함수

간단히 정리하자면 Promise는 가독성과 유지보수 측면에서 콜백보다 효과적이며 에러 처리 및 비동기 코드 구조화 측면에서 더 편리하다. 최근 JavaScript에서는 async/await 구문과 함께 Promise를 사용하여 더 효율적인 비동기 코드를 작성 할 수 있다. 

 

다음에는 async/await 와 promise 의 차이와 설명을 해볼 예정이다.

 

관련 참고 사이트

https://velog.io/@khy4018/Promise