JavaScript Async


Innehållsförteckning

    Visa innehållsförteckning

"async and await gör löften lättare att skriva"

async gör att en funktion returnerar ett löfte

väntar får en funktion att vänta på ett löfte

Asynkron syntax

Nyckelordet async före en funktion gör att funktionen returnerar ett löfte:

Exempel

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

Är det samma som:

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

Så här använder du löftet:

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

Exempel

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

Prova själv →

<!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 enklare, eftersom du förväntar dig ett normalt värde (ett normalt svar, inte ett fel):

Exempel

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

Prova själv →

<!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>

Avvakta Syntax

Nyckelordet await kan endast användas i en async-funktion.

Nyckelordet await gör att funktionen pausar körningen och vänta på ett löst löfte innan det fortsätter:

let value = await promise;


Exempel

Låt oss gå långsamt och lära oss hur man använder det.

Grundläggande syntax

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

 myDisplay();

Prova själv →

<!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 två argumenten (lös och avvisa) är fördefinierade av JavaScript.

Vi kommer inte att skapa dem, utan anropa en av dem när executor-funktionen är klar.

Mycket ofta kommer vi inte att behöva en avvisande funktion.

Exempel utan avslag

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

 myDisplay();

Prova själv →

<!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>

Väntar 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();

Prova själv →

<!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>

Väntar 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();

Prova själv →

<!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>

Webbläsarstöd

ECMAScript 2017 introducerade JavaScript-nyckelorden async och avvaktar.

Följande tabell definierar den första webbläsarversionen med fullt stöd för båda:

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