비동기 Promise 정리

[주인장]

1. Promise란? 

- 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

2. Promise가 필요한 이유? 

- 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.

$.get('url 주소/products/1', function(response) {
  // ...
});

- 위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 요청을 보낸다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 보인다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.

- 비동기 처리를 작성하다보면 콜백 함수가 중첩되어 알아보기 어려운 코드가 마들어지는 경우 Promise를 사용하면 복잡하게 중첩된 코드를 알아보기 쉽게 작성할 수 있다. 

- 기존에는 실행 순서가 중요한 상황에서는 코드를 실행 순서에 따라 콜백 함수를 중첩하는 방법을 사용한다.

// 콜백 함수를 여러개 중첩하여 비동기 순서 처리

function sleep(callback){

    setTimeout(function() {

        callback();

    }, 1000);

}

sleep(function(){

    console.log("A");

    sleep(function(){

        console.log("B");

        sleep(function(){

            console.log("C");

        });

    });

});

3. 프로미스의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)이다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

4. Promise의 기본 

- promise 생성자 

var promise = new Promise(function(resolve, reject) { ... });

- resolve : 함수 안의 처리가 끝났을 때 호출해야 하는 콜백 함수. resolve 함수에는 어떠한 값도 인수로 넘길 수 있음. 이 값은 다름 처리를 실행하는 함수에 전달된다. 

- reject : 함수 안의 처리가 실패했을 때 호출해야 하는 콜백 함수. reject 함수에는 어떠한 값도 인수로 넘길 수 있음. 대부분의 경우 오류 메시지 문자열을 인수로 사용한다. 

//============================

// 프로미스 

//============================

var promise = new Promise(function(resolve, reject){

    setTimeout(function() {

        console.log("A");

        resolve();

    }, 1000);

});

promise.then(function(){

    console.log("B");

})

-  Promise에 인수로 넘긴 함수는 비동기 처리를 수행하는 함수이며, 1초후에 A를 표히사고 그 다음에는 함수 resolve를 호출해서 Promise 안의 처리를 종료 시킨다. 

- resolve 함수가 실행되면 then 메소드에 등록한 함수가 호출된다. 

5. Promise를 종료시키는 resolve 함수와 then 메소드 

- resolve 함수는 Promise를 종류 시킨다. 

promise.then(onFullfilled);

- onFullfilled : 성공 콜백 함수, promise 안의 처리가 정상적으로 끝났을 때 호출되는 함수 

- onFullfilled 함수는 인수로 response를 받는다. 

var promise2 = new Promise(function(resolve, reject){

    setTimeout(function() {

        var name = prompt("이름을 입력하세요 :");

        resolve(name);

    }, 1000);

});

promise2.then(function(name){

    console.log("안녕하세요. " + name + "님");

});

6. Promise를 실패로 처리하는 reject 함수와 catch 메소드 

- reject 함수는 Promise를 종료 시킨다. 

- reject 함수가 실행되면 then 메소드에 넘긴 함수는 실행되지 않는다. 대신 catch 메소드에 넘긴 함수가 실행된다. 

promise.catch(onRejected);

- onRejected는 실패 콜백 함수라 한다. 

- onRejected 함수는 인수로 error를 받으며 이것은 promise 안에서 reject 함수를 실행 했을 때 넘긴 인수이다. 

var promise3 = new Promise(function(resolve, reject){

    setTimeout(function() {

        var n = parseInt(prompt("10 미만의 숫자를 입력하세요."));

        if(n <= 10){

            resolve(n);

        } else {

            reject(`오류 : ${n}은/는 10 이상입니다. `);

        }

    }, 1000);

});

promise3.then(function(num){

    console.log(`2^${num} = ${Math.pow(2,num)}`);

}).catch(function(error){

    console.log(error);

});

7. then의 두 번째 인수 

- then 메소드에서는 두 번째 인수로 실패 콜백 함수를 지정할 수 있다. 

- then 메소드에서 처리할 내용과 catch 메소드에서 처리할 내용을 then 메소드 하나도 처리할 수 있다. 

promise.then(onFullfilled, onRejected); 

- promise 안의 처리가 성공하면 onFullfilled 함수가 실행되고 실패하면 onRejected 함수가 실행된다. 

var promise4 = new Promise(function (resolve, reject) {

  setTimeout(function () {

    var n = parseInt(prompt("10 미만의 숫자를 입력하세요."));

    if (n <= 10) {

      resolve(n);

    } else {

      reject(`오류 : ${n}은 10 이상입니다. `);

    }

  }, 1000);

});

promise4.then(

  function (num) {

    console.log(`2^${num} = ${Math.pow(2, num)}`);

  },

  function (error) {

    console.log(error);

  }

);

8. Promise가 실행하는 콜백 함수에 인수 넘기기 

-  promise가 실행하는 콜백 함수에 인수를 넘기기 위해서는 Promise 객체를 반환하는 함수를 정의해서 구현한다. 

function buyAsync(mymoney) {

  return new Promise(function (resolve, reject) {

    setTimeout(() => {

      var payment = parseInt(prompt("지불하고자 하는 금액을 입력하세요."));

      var balance = mymoney - payment;

      if (balance > 0) {

        console.log(`${payment}원을 지불 했습니다.`);

        resolve(balance);

      } else {

        reject(`잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);

      }

    }, 1000);

  });

}

buyAsync(500)

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

  })

  .catch(function (error) {

    console.log(error);

  });

- buyAsync 함수는 Promise 객체를 반환하는 함수이다. buyAsync 함수에 넘긴 인수를 Promise 객체가 실행하는 익명 함수 안에서 사용할 수 있다. 

9. Promise로 비동기 처리 연결하기 

-  Promise로 비동기 처리를 여러 개 연결해서 순차적으로 실행하려면 then 메소드 안에서 실행하는 성공 콜백 함수가 Promise 객체를 반환하도록 만든다. 그러면 then 메소드 체인으로 Promise 작업을 연결할 수 있다. 

// Promise로 비동기 처리 연결하기

function buyAsync(mymoney) {

  return new Promise(function (resolve, reject) {

    setTimeout(() => {

      var payment = parseInt(prompt("지불하고자 하는 금액을 입력하세요."));

      var balance = mymoney - payment;

      if (balance > 0) {

        console.log(`${payment}원을 지불 했습니다.`);

        resolve(balance);

      } else {

        reject(`잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);

      }

    }, 1000);

  });

}

buyAsync(500)

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

    return buyAsync(balance);

  })

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

    return buyAsync(balance);

  })

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

    return buyAsync(balance);

  })

  .catch(function (error) {

    console.log(error);

  });

10. 비동기 처리 여러 개를 병렬로 실행하기 

a. Promise.all 메소드 

- Promise 객체의 all 메소드를 사용하면 비동기 처리 여러 개를 병렬로 실행할 수 있다. 

- 모든 처리가 성공적으로 끝났을 때만 다음 작업을 실행하도록 만들 수 있다. 

Promise.all(iterable);

- all 메소드의 인수인 iterable은 Promise 객체가 요소로 들어 있는 반복 가능(Iterable)한 객체이다. 

// 비동기 처리 여러 개를 병렬로 실행하기

function buyAsync(name, mymoney) {

  return new Promise(function (resolve, reject) {

    setTimeout(() => {

      var payment = parseInt(

        prompt(`${name}님 지불하고자 하는 금액을 입력하세요.`)

      );

      var balance = mymoney - payment;

      if (balance > 0) {

        console.log(`${name} : ${payment}원을 지불 했습니다.`);

        resolve(balance);

      } else {

        reject(`${name} : 잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);

      }

    }, 1000);

  });

}

Promise.all([

  buyAsync("AAA", 500),

  buyAsync("BBB", 600),

  buyAsync("CCC", 1000),

])

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

  })

  .catch(function (error) {

    console.log(error);

  });

b. Promise.race 메소드 

- 가장 먼저 종료한 Promise 객체의 결과만 다른 작업으로 보냅니다. 

Promise.race(iterable);

- race 메소드의 인수인 iterable은 Promise 객체가 요소로 들어 있는 반복 가능(Iterable)한 객체이다.

// 비동기 처리 여러 개를 병렬로 실행하기

function buyAsync(name, mymoney) {

  return new Promise(function (resolve, reject) {

    setTimeout(() => {

      var payment = parseInt(

        prompt(`${name}님 지불하고자 하는 금액을 입력하세요.`)

      );

      var balance = mymoney - payment;

      if (balance > 0) {

        console.log(`${name} : ${payment}원을 지불 했습니다.`);

        resolve(balance);

      } else {

        reject(`${name} : 잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);

      }

    }, 1000);

  });

}

Promise.race([

  buyAsync("AAA", 500),

  buyAsync("BBB", 600),

  buyAsync("CCC", 1000),

])

  .then(function (balance) {

    console.log(`잔액은 ${balance}원 입니다. `);

  })

  .catch(function (error) {

    console.log(error);

  });