JavaScript Promise

"I Promise a Result!"

"Producing code" (produktionskode) er kode, der tager noget tid

"Consuming code" (forbrugerskode) er kode, der skal vente på et resultat

Promise er et JavaScript-objekt, der forbinder produktionskode og forbrugerskode

JavaScript Promise-objekter

JavaScript Promise-objekter indeholder produktionskode og kald til forbrugerskode:

Promise-syntaks

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (kan tage noget tid)
  myResolve(); // Ved succes
  myReject();  // Ved fejl
});
// "Consuming Code" (må vente på en opfyldt løfte)
myPromise.then(
  function(value) { /* Kode, der skal køres ved succes */ },
  function(error) { /* Kode, der skal køres ved fejl */ }
);

Når der udføres kode og der opnås et resultat, skal det kalde én af to tilbagekaldsfunctioner:

Resultat Kald
Success myResolve(result value)
Fejl myReject(error object)

Promise-objektets egenskaber

JavaScript Promise-objekter kan være:

  • Pending
  • Fulfilled
  • Rejected

Promise-objekter understøtter to egenskaber:state og result。

Når et Promise-objekt "pending" (arbejder), er resultatet undefined.

Når et Promise-objekt "fulfilled", er resultatet en værdi.

Når en Promise-objekt er "rejected", er resultatet et fejlobjekt.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Resultatværdi
"rejected" error-objekt

Du kan ikke få adgang til Promise-ejenskaberne state og result.

Du skal bruge Promise-metoden til at håndtere Promise.

Hvordan bruge Promise

Her er metoderne til brug af Promise:

myPromise.then(
  function(value) { /* kode hvis succesfuldt */ },
  function(error) { /* kode hvis nogen fejl */ }
);

Promise.then() har to parametre, en for succes og en for fejl.

Begge er valgfri, så du kan tilføje en callback for succes eller fejl.

Eksempel

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Generer kode (dette kan tage noget tid)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prøv det selv

JavaScript Promise-eksempel

For at demonstrere brug af Promise, vil vi bruge callback-eksemplet fra det forrige kapitel:

  • Vent på timeout
  • Vent på fil

Vent på timeout

Brug af callback-eksempel

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

Prøv det selv

Brug af Promise-eksempel

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

Prøv det selv

Vent på fil

Brug af callback-eksempel

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

Prøv det selv

Brug af Promise-eksempel

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("Fil ikke fundet");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prøv det selv

Browser-understøttelse

ECMAScript 2015, også kendt som ES6, introducerede JavaScript Promise-objekter.

Følgende tabel viser den første browserversion, der fuldt ud understøtter Promise-objekter:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Februar 2014 Juli 2015 April 2014 September 2014 Marts 2014