techjavascript

promise

,

Promise객체는 비동기 계산을 위해 사용됩니다. Promise는 아직은 아니지만 나중에 완료될 것으로 기대되는 연산을 표현합니다.

구문

1
new Promise(/* executor */ function (resolve, reject) { ... });

매개변수

resolve 및 reject 인수를 통해 다른 함수에 전달될 함수 입니다. executor함수는 resolve 및 reject 함수를 제공하는 promise 구현에 의해 죽시 실행됩니다.

executor

resolve 및 reject 인수를 통해 다른 함수에 전달될 함수입니다 executor함수는 resolve 및 reject함수는 프로미스에 바인딩되고 둘을 호출하면 각각 프로미스를 이행(fulfill) 또는 거부(reject, 거절)합니다. executor는 일부 비동기 작업(work)을 시작하리라 예상되고 작업이 완료되면 프로미스의 최종값을 결정(resolve, 확정)하거나 오류가 발생하면 거부하기 위해 resolve또는 reject 함수를 호출합니다.

설명

promise는 피로미스가 생성될 때 꼭 알 필요는 없는 값을 위한 대리자입니다. 이는 비동기 동작이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기(handler)를 연결할 수 있도록 합니다. 프로미스는 비동기 메서드가 동기 메서드처럼 값을 반환하도록 합니다. 최종값 대신, 비동기 메서드는 미래 어느 시점에 값을 갖는 promise를 반환합니다.

promise는 다음 중 하나의 상태를 가집니다.

  • 대기중(pending): 초기 상태, 이행 또는 거부되지 않은.
  • 이행됨(fulfilled): 연산이 성공리에 완료되었음을 뜻합니다.
  • 거부됨(rejected): 연산이 실패했음을 뜻합니다.

대기중인 프로미스는 값으로 이행되거나, 이유(reason 또는 오류)와 함께 거부될 수 있습니다. 이 중 하나가 일어난 경우, 연결된 처리기는 호출된 프로미스의 then메서드에 의해 대기열에 오릅니다.(queued up).
(프로미스에 처리기가 부착될 때 이미 이행 또는 거부된 경우에도 처리기는 호출되므로, 비동기 연산과 부착될 처리기 사이에는 경합 조건(race condition)이 없습니다.)

Promise.prototype.then() 및 Promise.prototype.catch() 메서드가 프로미스를 반환하기에, 둘은 연결(chain)될 수 있습니다. - 합성(composition)이라고 불립니다.

속성

Promise.length 값이 언제나 1인 Length 속성입니다. (생성자 인수의 수를 나타냅니다.)

Promise.prototype Promise 생성자의 프로토타입을 나타냅니다.

메서드

Promise.all(iterable)
인수 iterable 내의 모든 프로미스가 결정된 때 결정되며 하나의 프로미스라도 거부된 경우 즉시 거부하는 프로미스를 반환합니다. 이 프로미스가 결정되는 경우, iterable 내의 프로미스가 결정한 값들의 배열로 결정됩니다. 반환된 프로미스가 거부되는 경우, iterable 내의 거부된 그 프로미스가 거부된 이유를 그대로 이용해 거부합니다. 이 메서드는 여러 프로미스의 결과를 모두 모으는 데 유용할 수 있습니다.

Promise.race(iterable)
iterable 내 프로미스 중 하나를 결정 또는 거부하자마자 결정 또는 거부하는 프로미스를 반환합니다. 그 프로미스로부터 값 또는 이유로.

Promise.reject(reason)
주어진 reason(이유)로 거부된 Promise 객체를 반환합니다.

Promise.resolve(value)
주어진 값(value)으로 결정된 Promise객체를 반환합니다. 값이 thenable 객체인 (즉 then 메서드가 있는) 경우, 반환된 프로미스는 그 thenable을 “따르고(follw)”, 그 최종 상태를 취합니다. 그렇지 않으면 반환된 프로미스는 그 값으로 이행됩니다. 보통, 값이 프로미스인지 아닌지 알고 싶은 경우 - 대신 Promise.resolve(value)로 쓰고 프로미스처럼 반환값으로 작동합니다.

예

Promise 생성

이 간단한 예는 Promise의 메커니즘을 보입니다. testPromise()메서드는 <button>이 클릭될 때마다 호출됩니다. 결정하는 프로미스를 만듭니다. 무작위로 1-3초마다 프로미스 셈(1부터 시작하는 숫자)에 window.setTimeout()을 사용하는 Promise() 생성자는 프로미스르 만드는데 쓰입니다.

프로미스 이행은 간단하게 기록됩니다. p1.then()을 사용하는 이행 콜백 세트를 통해. 기록 약간이 메서드의 동기 부분을 프로미스의 비동기 완료(completion)와 분리(decouple)되는 법을 보입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
'use strict';
var promiseCount = 0;

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

    var log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Started (<small>sync code started </small>) <br/>');

    // 새 약속을 (생성) 합니다. 이 프로미스의 숫자 셈을 약소합니다.
    var p1 = new Promise(
        function (resolve, reject) {
            log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise Started (<small> Async code started </small>)<br/>');
            window.setTimeout(function () {
                // 프로미스 이행
                resolve(thisPromiseCount);
            }, Math.random() * 2000 + 1000);
        }
    )

    // 프로미스가 then() 호출로 결정된/ 이행된 경우 무엇을 할 지를 정의하고,
    // catch() 메서드는 프로미스가 거부된 경우 무엇을 할 지를 정의합니다.

    p1.then(function (val) {
        log.insertAdjacentHTML('beforeend', val +
            ') Promise fulfilled (<small>Async code terminated</small>)<br/>');
    })
    .catch(
        // 거부 이유 기록
        function(reason) {
            console.log('Handle rejected promise ('+reason+') here.');
        }
    )

    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') Promise made (<small>Sync code terminated</small>)<br/>');
}

참조: MDN web docs

Share