Promise w JavaScript

"I Promise a Result!"

"Producing code" (kod produkcyjny) to kod, który wymaga pewnego czasu

"Consuming code" (kod konsumpcyjny) to kod, który musi czekać na wynik

Promise to obiekt JavaScript, który łączy kod generujący i kod konsumpcyjny

Obiekt Promise w JavaScriptie

Obiekt Promise w JavaScriptie zawiera kod produkcyjny i wywołania kodu konsumpcyjnego:

Gramatyka Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (może wymagać pewnego czasu)
  myResolve(); // przy sukcesie
  myReject();  // przy błędzie
});
// "Consuming Code" (musi czekać na spełnienie obietnicy)
myPromise.then(
  function(value) { /* Kod wywoływany przy sukcesie */ },
  function(error) { /* Kod wywoływany przy błędzie */ }
);

Kiedy kod jest wykonywany i uzyskuje wynik, powinien wywołać jeden z dwóch wywołań zwrotnych:

Wynik Wywołanie
Sukces myResolve(result value)
Błąd myReject(error object)

Właściwości obiektu Promise

Obiekt Promise w JavaScriptu może być:

  • Pending
  • Fulfilled
  • Rejected

Obiekt Promise obsługuje dwie właściwości:state i result.

Kiedy obiekt Promise "pending" (pracujący), wynik to "nieokreślone".

Kiedy obiekt Promise "fulfilled", wynik to wartość.

Kiedy obiekt Promise jest "rejected", wynik to obiekt błędu.

myPromise.state myPromise.result
"pending" Nieokreślone
"fulfilled" Wartość wynikowa
"rejected" Obiekt błędu

Nie masz dostępu do właściwości Promise state i result.

Musisz używać metody Promise, aby obsługiwać Promise.

Jak używać Promise

Oto metody użycia Promise:

myPromise.then(
  function(value) { /* kod w przypadku sukcesu */ },
  function(error) { /* kod w przypadku błędu */ }
);

Promise.then() przyjmuje dwa parametry, jeden dla wywołania zwrotnego na sukces, drugi na porażkę.

Oboje są opcjonalne, więc możesz dodać wywołania zwrotne na sukces lub porażkę.

Przykład

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Generowanie kodu (może to zająć trochę czasu)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Błąd");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Spróbuj sam

Przykład JavaScript Promise

Aby pokazać użycie Promise, użyjemy przykładu wywołań zwrotnych z poprzedniego rozdziału:

  • Oczekiwanie na przekroczenie limitu czasu
  • Oczekiwanie na plik

Oczekiwanie na przekroczenie limitu czasu

Przykład użycia wywołań zwrotnych

setTimeout(function() { myFunction("Kocham Cię !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Spróbuj sam

Przykład użycia Promise

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

Spróbuj sam

Oczekiwanie na plik

Przykład użycia wywołań zwrotnych

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

Spróbuj sam

Przykład użycia 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("Nie znaleziono pliku");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Spróbuj sam

Obsługa przeglądarek

ECMAScript 2015, również nazywany ES6, wprowadził obiekty Promise w JavaScript.

Poniższa tabela podaje pierwsze wersje przeglądarek, które w pełni obsługiwały obiekty Promise:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Luty 2014 roku Lipiec 2015 roku Kwiecień 2014 roku Wrzesień 2014 roku Marzec 2014 roku