JavaScript Asynkron

Indholdsfortegnelse

"async and await gør løfter nemmere at skrive"

async får en funktion til at returnere et løfte

afvent får en funktion til at vente på et løfte

Asynkron syntaks

Nøgleordet async før en funktion får funktionen til at returnere et løfte:

Eksempel

async function myFunction() {
  return "Hello";
}

Er det samme som:

function myFunction() {
  return Promise.resolve("Hello");
}

Sådan bruger du løftet:

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

Eksempel

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  
  function(error) {myDisplayer(error);}
);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

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

async function myFunction() {return "Hello";}

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

</body>
</html>

Eller enklere, da du forventer en normal værdi (et normalt svar, ikke en fejl):

Eksempel

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

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

async function myFunction() {return "Hello";}

myFunction().then(
  function(value) {myDisplayer(value);}
);
</script>

</body>
</html>

Afvent syntaks

Søgeordet avent kan kun bruges i en async funktion.

Nøgleordet await får funktionen til at sætte udførelsen på pause og vent på et løst løfte, før det fortsætter:

let value = await promise;

Eksempel

Lad os gå langsomt og lære at bruge det.

Grundlæggende syntaks

async function myDisplay() {
  let myPromise = new Promise(function(resolve,  reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

De to argumenter (opløs og afvis) er foruddefineret af JavaScript.

Vi vil ikke oprette dem, men kalde en af dem, når udførerfunktionen er klar.

Meget ofte har vi ikke brug for en afvisningsfunktion.

Eksempel uden afvisning

async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Venter på en timeout

async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

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

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Venter på en fil

async function getFile() {
  let myPromise = new Promise(function(resolve) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        resolve("File not Found");
      }
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

getFile();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

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

<script>
async function getFile() {
  let myPromise = new Promise(function(resolve) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        resolve("File not Found");
      }
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

getFile();
</script>

</body>
</html>

Browser support

ECMAScript 2017 introducerede JavaScript-nøgleordene async og afventer.

Følgende tabel definerer den første browserversion med fuld understøttelse af begge:


Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
Dec, 2016	Apr, 2017	Mar, 2017	Sep, 2017	Dec, 2016