JavaScript Promises

https://www.w3schools.com/js/js_promise.asp

JavaScript Promises

JavaScript Promises
자바스크립트 프라미스

"I Promise a Result!"
"저는 결과를 약속합니다!"

"Producing code" is code that can take some time

"생산 코드"는 얼마간의 시간을 필요로 하는 코드입니다. 

"Consuming code" is code that must wait for the result

"소비 코드"는 결과를 위해 반드시 기다려야 하는 코드 입니다.

A Promise is a JavaScript object that links producing code and consuming code

Promise는 생산 코드와 소비 코드를 연결하는 자바스크립트 객체입니다.

JavaScript Promise Object
자바스크립트 프라미스 객체

A JavaScript Promise object contains both the producing code and calls to the consuming code:
자바스크립트 프라미스 객체는 생산 코드와 소비 코드에 대한 호출을 포함하고 있습니다.

Promise Syntax
프라미스 구문

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

When the executing code obtains the result, it should call one of the two callbacks:
실행 코드가 결과를 얻을 때, 실행 코드는 두 개의 콜백들 중 하나를 호출합니다.

ResultCall

Success	myResolve(result value)
Error	myReject(error object)

---

Promise Object Properties
프라미스 객체 속성들

A JavaScript Promise object can be:
자바스크립트 프라미스 객체는 다음이 될 수 있습니다:

• Pending 대기
• Fulfilled 이행
• Rejected 실패

The Promise object supports two properties: state and result.
프라미스 객체는 상태 와 결과 두 개의 속성을 지원합니다. 

While a Promise object is "pending" (working), the result is undefined.

When a Promise object is "fulfilled", the result is a value.

When a Promise object is "rejected", the result is an error object.

myPromise.statemyPromise.result

"pending"	undefined
"fulfilled"	a result value
"rejected"	an error object

You cannot access the Promise properties state and result.

You must use a Promise method to handle promises.

---

Promise How To
프라미스 사용법

Here is how to use a Promise:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() takes two arguments, a callback for success and another for failure.

Both are optional, so you can add a callback for success or failure only.

Example
예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

---

JavaScript Promise Examples
자바스크립트 프라미스 예제들

To demonstrate the use of promises, we will use the callback examples from the previous chapter:

• Waiting for a Timeout
• Waiting for a File

---

Waiting for a Timeout
타임아웃을 위한 대기

Example Using Callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Example Using Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

---

Waiting for a file
파일을 위한 대기

Example using Callback

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);

Example using 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);}
);

---

Browser Support
브라우저 지원

ECMAScript 2015, also known as ES6, introduced the JavaScript Promise object.

The following table defines the first browser version with full support for Promise objects:

Chrome 33	Edge 12	Firefox 29	Safari 7.1	Opera 20
Feb, 2014	Jul, 2015	Apr, 2014	Sep, 2014	Mar, 2014