JavaScript Fetch API

Fetch API -liittymä mahdollistaa verkkoselaimen lähettää HTTP-pyynnön verkkoserverille.

XMLHttpRequest ei ole enää tarpeen.

Selaimen tuki

Taulukossa olevat numerot antavat tiedon ensimmäisestä selaimesta, joka tukee täysin Fetch API:ta:

Chrome IE Firefox Safari Opera
Chrome 42 Edge 14 Firefox 40 Safari 10.1 Opera 29
2011 vuoden 6 kuukausi 2016 vuoden 8 kuukausi 2015 vuoden 8 kuukausi 2017 vuoden 3 kuukausi 2015 vuoden 4 kuukausi

Fetch API-esimerkki

Seuraava esimerkki lukee tiedoston ja näyttää sen sisällön:

Esimerkki

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

Kokeile itse

Koska Fetch perustuu async ja await, seuraava esimerkki saattaa olla helpommin ymmärrettävä:

Esimerkki

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

Kokeile itse

Voit tehdä sen vielä paremmin: käytä ymmärrettäviä nimiä x ja y sijaan:

Esimerkki

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

Kokeile itse