[ Javascript ] - Promise란?

Promise

프로미스는 자바스크립트의 비동기 처리에 사용되는 객체로, 작업의 순서에 따른 실행을 가능케 합니다.

예를 들어 서버를 통해서 데이터를 받아 그 값을 반환하는 식의 작업인 경우, 비동기 처리 방식인 자바스크립트의 특성상 서버로부터 값을 받기 전에 값을 반환하여 문제가 발생할 수 있습니다. 이러한 상황에서 프로미스 객체를 사용하여 서버로부터 값을 받은 후에 다음 작업이 실행되도록하여 작업의 순서를 보장할 수 있습니다.

* 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 실행하여 작업이 완료되는 순서대로 결과물을 출력하는 것.

function delay(sec, callback) {
  setTimeout(() => {
    callback(new Date().toISOString());
  }, sec * 1000);
}

console.log("start", new Date().toISOString());

delay(1, (result) => {
  console.log(1, result);
});

console.log("hello");

위의 코드를 실행시 start, hello, 1 의 순서로 콘솔이 찍히게 된다. 이는 자바스크립트의 비동기처리뢰 인해 delay함수가 완료되기 이전에 밑의 코드가 실행되었기 때문이다.

만약에 아래와 같이 delay함수를 여러차례 실행한다고 할 때에도, 1의 1초가 끝나고 2가 실행되고, 2의 1초가 끝나고, 3이 실행되는 식이 아니라 1의 작업실행후 완료 전 2를 실행하고,1과 2가 완료되지 않았다하더라고 바로 3을 실행하여 결과값의 시간 차이는 1초가 아니라, 각 실행된 시간 차이만 존재하게 된다.

delay(1, (result) => {
  console.log(1, result);
});

delay(1, (result) => {
  console.log(2, result);
});

delay(1, (result) => {
  console.log(3, result);
});
// 1 2022-09-19T02:04:15.792Z
// 2 2022-09-19T02:04:15.792Z
// 3 2022-09-19T02:04:15.793Z

위와 같은 비동기 처리를 콜백함수를 사용하여, 앞의 작업이 완료된 후 다음 작업이 실행되도록 할 수 있다.

delay(1, (result) => {
  console.log(1, result);
  delay(1, (result) => {
    delay(1, (result) => {
      console.log(3, result);
    });
    console.log(2, result);
  });
});

하지만 위에 같이 코드 작성시 콜백안에 콜백이 들어가고, 또  콜백이 들어가는 형태로 콜백지옥이라 불리는데, 코드의 가독성이 떨어지고 작성의 불편함이 있다. 

프로미스는 위와 같은 콜백지옥을 극복하고, 비동기처리를 동기적으로 구현하는것을 가능케 하였다. 위의 코드를 프로미스를 통해 처리할 경우 아래와 같이 작성할 수 있다.

function delayP(sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(new Date().toISOString());
    }, sec * 1000);
  });
}

delayP(1)
  .then((result) => {
    console.log(1, result);
    return delayP(1);
  })
  .then((result) => {
    console.log(2, result);
    return delayP(1);
  })
  .then((result) => {
    console.log(3, result);
    return delayP(3);
  });

 

프로미스 사용법

1. new Promise()

새로운 promise 객체를 생성해 줍니다. 

const getData = (a, b, callback) => {
  return new Promise((resolve, reject) => {
    const value = callback(a, b);
    resolve(value);
  });
};

const callFun = (a, b) => a + b;

getData(1, 2, callFun)
  .then((result) => {
    setTimeout(() => {
      console.log("result1: ", result);
    }, 2 * 1000);
    return result + 1;
  })
  .then((result) => {
    setTimeout(() => {
      console.log("result2: ", result);
    }, 2 * 1000);
    return result + 1;
  })
  .then((result) => {
    setTimeout(() => {
      console.log("result2: ", result);
    }, 2 * 1000);
  });

resolve는 비동기 작업이 성공적으로 완료되어 전달받은 값을 반환할 때 사용한다.

reject는 작업이 실패한 경우 오류의 원인을 반환할 때 사용한다.

2. 반환하려는 결과를 resolve에 담는다.  

3. 반환된 값을 받을 때는 then( (result) => console.log(result) ); 이와 같은 식으로 값을 전달받는다.

4. then으로 처리한 후에 값을 보낼 때는 return을 사용한다.

 

프로미스의 상태

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

Pending(대기) : 작업이 완료되지 않은 상태

Fulfilled(이행) : 작업이 성공적으로 완료되어 프로미스 결과 값을 반환해준 상태

Rejected(실패) : 작업이 실패하여 오류가 발생한 상태

 

프로미스 메서드

1. promise.resolve()

주어진 값으로 이행하는 Promise 객체를 만들어 낸다.

const promiseData = promise.resolve(2);

2.. promise.all([ ])

배열 안에 여러 프로미스를 담을 수 있으며, 배열에 주어진 프로미스들을 처리한다.  반환된 프로미스들의 값은 순서대로 배열에 담아 반환하여 준다.

const promise1 = Promise.resolve(1);

const promise2 = new Promise((resolve, reject)=>{
    setTimeout(resolve, 4000, 2);
});

const promise3 = new Promise((resolve, reject)=>{
    setTimeout(resolve, 2000, 3);
});

Promise.all([promise1, promise2, promise3]).then((values)=>{
    console.log(values)
})

// 출력값
// [ 1, 2, 3 ]

 

출처

https://www.youtube.com/watch?v=CA5EDD4Hjz4&list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1&index=1

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

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