JavaScript Fetch API


Sisällysluettelo

    Näytä sisällysluettelo

Fetch API -liittymän avulla selain voi tehdä HTTP-pyyntöjä verkkopalvelimille.

😀 XMLHttpRequestiä ei enää tarvita.

Selaimen tuki

Taulukon numerot määrittelevät ensimmäiset selainversiot, jotka tukevat täysin Fetch API:ta:


Chrome 42 Edge 14 Firefox 40 Safari 10.1 Opera 29
Apr 2015 Aug 2016 Aug 2015 Mar 2017 Apr 2015

Hae API -esimerkki

Alla oleva esimerkki hakee tiedoston ja näyttää sisällön:

Esimerkki

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>
<script>

let file = "fetch_info.txt"

fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);

</script>
</body>
</html>

Koska Fetch perustuu async and await -toimintoon, yllä oleva esimerkki saattaa olla helpompi ymmärtää seuraavasti:

Esimerkki

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>

<script>
getText("fetch_info.txt");

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  document.getElementById("demo").innerHTML = y;
}
</script>

</body>
</html>

Tai vielä parempi: Käytä ymmärrettäviä nimiä x:n ja y:n sijaan:

Esimerkki

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>

<script>
getText("fetch_info.txt");

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  document.getElementById("demo").innerHTML = myText;
}
</script>

</body>
</html>