javascript promise 사용법

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

Promise - JavaScript | MDN

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 즉, 미래의 어떤 시점에 결과를 제공하겠다는 약속(프로미스)을 반환한다.

Promise는 기존에 javascript에서 많이 볼 수 있었던 콜백 지옥을 극복하기 위해 ECMA Script 6 스펙에서부터 지원되는 객체이다.

Promise 상태

- 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태.
- 이행(fulfilled) : 연산이 성공적으로 완료 된 상태.
- 거부(rejected) : 연산이 실패한 상태.

기본 예제

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("성공!")
    }, 250);
});

myPromise.then((succMsg) => 
    console.log("then " + succMsg)
);

기본 예제 결과

고급 예제

'use strict';
var promiseCount = 0;

function testPromise() {
    
    var thisPromiseCount = ++promiseCount;


    console.log('시작(동기적 코드 시작)');
    // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후)
    var p1 = new Promise(
        // 실행 함수는 프로미스를 이행(resolve)하거나
        // 거부(reject)할 수 있음
        function(resolve, reject) {
            console.log('프로미스 시작(비동기적 코드 시작)');
            // setTimeout은 비동기적 코드를 만드는 예제에 불과
            window.setTimeout(
                function() {
                    // 프로미스 이행 !
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);
        }
    );

    // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고,
    // 거부됐을 때 할 일은 catch() 호출로 정의
    p1.then(
        // 이행 값 기록
        function(val) {
            console.log('프로미스 이행(비동기적 코드 종료)');
        })
    .catch(
        // 거부 이유 기록
        function(reason) {
            console.log('여기서 거부된 프로미스(' + reason + ')를 처리하세요.');
        });

    console.log('프로미스 생성(동기적 코드 종료)');
}

testPromise();

크롬 개발자 콘솔에서 결과가 나오기전 소스를 여러번 실행시키면 서로 다른 프로미스가 번갈아 이행되는 것을 볼 수 있다.