JavaScript løfter

Indholdsfortegnelse

Vis indholdsfortegnelse

"Jeg lover et resultat!"

"Producer kode" er kode, der kan tage noget tid

"Forbrugskode" er kode, der skal vente på resultatet

Et løfte er et JavaScript-objekt, der forbinder producerende kode og forbrugende kode

JavaScript Promise Object

Et JavaScript Promise-objekt indeholder både den producerende kode og kald til den forbrugende kode:

Løftesyntaks

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 */ }
);

Når den producerende kode opnår resultatet, skal den kalde et af de to tilbagekald:

Success: myResolve(resultatværdi)
Error: myReject(fejlobjekt)

Lovobjektegenskaber

Et JavaScript Promise-objekt kan være:

Verserende
Opfyldt
Afvist

Promise-objektet understøtter to egenskaber: tilstand og resultat.

Mens et Promise-objekt "afventer" (virker), er resultatet udefineret.

Når et løfteobjekt er "opfyldt", er resultatet en værdi.

Når et løfteobjekt "afvises", er resultatet et fejlobjekt.

"pending": udefineret
"fulfilled": en resultatværdi
"rejected": et fejlobjekt

Du kan ikke få adgang til Promise-egenskaberne tilstand og resultat.

Du skal bruge en løftemetode til at håndtere løfter.

Lover hvordan man

Sådan bruger du et løfte:

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

Promise.then() tager to argumenter, et tilbagekald for succes og et andet for fiasko.

Begge er valgfrie, så du kan tilføje et tilbagekald kun for succes eller fiasko.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

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

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

// some code (try to change x to 5)

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

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

JavaScript-løfteeksempler

For at demonstrere brugen af løfter, vil vi bruge callback-eksemplerne fra det forrige kapitel:

Venter på en timeout
Venter på en fil

Venter på en timeout

Eksempel på brug af tilbagekald

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

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

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

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

Eksempel på brug af løfte

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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

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

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

</body>
</html>

Venter på en fil

Eksempel ved brug af tilbagekald

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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

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

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

getFile(myDisplayer); 
</script>

</body>
</html>

Eksempel ved hjælp af 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);}
);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

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

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  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);}
);
</script>

</body>
</html>

Browser support

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

Følgende tabel definerer den første browserversion med fuld understøttelse af Promise-objekter:


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