JavaScript asynchronní

Obsah

„async a čekání usnadňují psaní slibů“

async způsobí, že funkce vrátí Promise

wait způsobí, že funkce čeká na slib

Asynchronní syntaxe

Klíčové slovo async před funkcí způsobí, že funkce vrátí slib:

Příklad

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

Je stejné jako:

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

Zde je návod, jak používat Promise:

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

Příklad

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

Zkuste to sami →

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

Nebo jednodušeji, protože očekáváte normální hodnotu (normální odezvu, nikoli chybu):

Příklad

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

Zkuste to sami →

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

Čeká na syntaxi

Klíčové slovo await lze použít pouze uvnitř funkce async.

Klíčové slovo await způsobí, že funkce pozastaví provádění a počkejte na vyřešený slib, než bude pokračovat:

let value = await promise;

Příklad

Pojďme pomalu a naučme se to používat.

Základní syntaxe

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

 myDisplay();

Zkuste to sami →

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

Dva argumenty (vyřešit a zamítnout) jsou předdefinovány JavaScriptem.

Nebudeme je vytvářet, ale zavoláme jeden z nich, až bude funkce exekutor připravena.

Velmi často nebudeme potřebovat funkci odmítnutí.

Příklad bez odmítnutí

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

 myDisplay();

Zkuste to sami →

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

Čekání na časový limit

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

 myDisplay();

Zkuste to sami →

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

Čekání na soubor

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

Zkuste to sami →

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

Podpora prohlížeče

ECMAScript 2017 zavedl klíčová slova JavaScriptu asynchronní a čeká.

Následující tabulka definuje první verzi prohlížeče s plnou podporou obou:


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