JavaScript Fetch API

Πίνακας περιεχομένων

Η διεπαφή Fetch API επιτρέπει στο πρόγραμμα περιήγησης ιστού να υποβάλλει αιτήματα HTTP σε διακομιστές ιστού.

😀 Δεν χρειάζεται πλέον XMLHttpRequest.

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν τις πρώτες εκδόσεις του προγράμματος περιήγησης που υποστηρίζουν πλήρως το Fetch API:


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

Παράδειγμα Fetch API

Το παρακάτω παράδειγμα ανακτά ένα αρχείο και εμφανίζει το περιεχόμενο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Δεδομένου ότι το Fetch βασίζεται σε ασυγχρονισμό και σε αναμονή, το παραπάνω παράδειγμα μπορεί να είναι πιο κατανοητό ως εξής:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ή ακόμα καλύτερα: Χρησιμοποιήστε κατανοητά ονόματα αντί για x και y:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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