JavaScript Promise

"I Promise a Result!"

"Producing code（생산 코드）"은 일정 시간이 필요할 수 있는 코드입니다

"Consuming code（소비 코드）"은 결과를 기다리는 코드입니다

Promise는 생성 코드와 소비 코드를 연결하는 JavaScript 객체입니다

JavaScript Promise 객체

JavaScript Promise 객체는 생산 코드와 소비 코드 호출을 포함합니다:

Promise 문법

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（일정 시간이 필요할 수 있는 코드）
  myResolve(); // 성공 시
  myReject();  // 에러 발생 시
});
// "Consuming Code"（결과를 기다리는 코드）
myPromise.then(
  function(value) { /* 성공 시의 코드 */ },
  function(error) { /* 에러 발생 시의 코드 */ }
);

코드 실행 후 결과를 얻을 때, 두 가지 콜백 중 하나를 호출해야 합니다:

결과 호출
성공 myResolve(result value)
에러 발생 myReject(error object)

Promise 객체 속성

JavaScript Promise 객체는 다음과 같습니다:

  • Pending
  • Fulfilled
  • Rejected

Promise 객체는 두 가지 속성을 지원합니다:state 과 result。

Promise 객체 "pending"（작업 중）일 때, 결과는 undefined입니다.

Promise 객체 "fulfilled" 일 때, 결과는 값입니다.

Promise 객체가 "rejected" 일 때, 결과는 오류 객체입니다.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" 결과 값
"rejected" error 객체

Promise의 state와 result 속성에 접근할 수 없습니다.

Promise를 처리하기 위해 Promise 메서드를 사용해야 합니다.

Promise 사용법

이하는 Promise를 사용하는 방법입니다：

myPromise.then(
  function(value) { /* 성공된 경우에 대한 코드 */ },
  function(error) { /* 오류가 발생한 경우에 대한 코드 */ }
);

Promise.then()는 두 가지 매개변수를 가지며, 하나는 성공 시 콜백이고 다른 하나는 실패 시 콜백입니다.

둘 다 선택사항이므로 성공 또는 실패에 콜백을 추가할 수 있습니다.

예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// 코드 생성（이 작업은 시간이 걸릴 수 있습니다）
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

직접 테스트해 보세요

JavaScript Promise 예제

Promise의 사용을 보여주기 위해, 이전 장의 콜백 예제를 사용하겠습니다:

  • 대기 시간 초과
  • 파일 대기

대기 시간 초과

回调 사용 예제

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

직접 테스트해 보세요

Promise의 사용 예제

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

직접 테스트해 보세요

파일 대기

回调 사용 예제

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {}}
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

직접 테스트해 보세요

Promise의 사용 예제

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {}}
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

직접 테스트해 보세요

브라우저 지원

ECMAScript 2015 또는 ES6로 알려진 것은 JavaScript Promise 객체를 도입했습니다.

아래 표는 Promise 객체를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다：

크롬 IE 파이어폭스 사파리 오페라
크롬 33 에지 12 파이어폭스 29 사파리 7.1 오페라 20
2014년 2월 2015년 7월 2014년 4월 2014년 9월 2014년 3월