Promise (obietnica)

Promiese to obiekt, który może wygenerować jakąś wartość w przyszłości: albo wartość oczekiwaną (resolved), albo przyczynę, dla której nie została ona dostarczona (np. bo wystąpił błąd sieciowy).

A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.

Promise states

pending (oczekujący):
resolved (rozstrzygnięty):
rejected (odrzucony):

Podstawowa konstrukcja:

var mypromise = new Promise(
  function (resolve, reject){
 // asynchroniczny kod realizujący działanie obietnicy
 // callback resolve() jeśli zadanie zakończy się sukcesem
 // callback reject()  jeśli realizacja zadania nie powiodła się 
}
)

Budujemy `Promise` do pobrania obrazka

Krok 1

function getImage(url){
    return new Promise(function(resolve, reject){
        var img = new Image()
        img.onload = function(){
            resolve(url)
        }
        img.onerror = function(){
            reject(url)
        }
        img.src = url
    })
}

Generujemy promise

getImage('img/most.JPG')

i obudowujemy ją dwoma funkcjami

function onSuccess(url) { document.getElementById('obrazek').src = url;}
function onFailuer(url) { console.log('Error loading ' + url)} 
getImage('img/most.JPG').then(onSuccess, onFailure);

Możemy to również zrobić TAK:

getImage('img/most.JPG').then (
  function(successurl){
    document.getElementById('obrazek').src = successurl;
  },
  function(errorurl){
    console.log('Error loading ' + errorurl)
  }
);

lub TAK (funkcje strzałkowe)

getImage('img/most.JPG').then (
  (url) =>  { document.getElementById('obrazek').src = url; },
  (url) =>  { console.log('Error loading ' + url); }
);

Testujemy działanie

Równoważne konstrukcje

getImage('img/most.JPG').then (
  function(successurl){....}
).catch(
   function(errorurl){...}
);

getImage('img/most.JPG').then(
  function(successurl) { ... }
).then(undefined, 
  function(errorurl) { ... }
);