JavaScript Async

"async and await make promises easier to write"

async gör funktionen returnera Promise

await gör funktionen vänta på Promise

Async-syntax

nyckelord före funktionen async gör funktionen returnera promise:

exempel

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

ekvivalent till:

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

Här är några metoder att använda Promise:

myFunction().then(
  function(value) { /* Kód vid framgång */ },
  function(error) { /* Kód vid fel */ }
);

exempel

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

Prova själv

eller ännu enklare, eftersom du förväntar dig normala värden (normalt svar, inte fel):

exempel

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

Prova själv

Await-syntax

nyckelord före funktionen await gör funktionen vänta på promise:

let value = await promise;

await nyckelord kan endast användas async i funktioner.

exempel

låt oss sakta ner och lära oss hur man använder det.

grundläggande syntax

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

Prova själv

vänta på timeout

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

Prova själv

vänta på fil

async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");}
    req.onload = function() {
      om (req.status == 200) {myResolve(req.response);}
      annars {myResolve("Fil inte funnen");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

Prova själv

Webbläsarstöd

ECMAScript 2017 introducerade JavaScript-kärnvärden async och await.

Följande tabell anger den första versionen av webbläsare som helt stöder båda:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
December 2016 April 2017 Mars 2017 September 2017 December 2016