JavaScript Fetch API

فهرست مطالب

.ﺪﻨﮐ ﻝﺎﺳﺭﺍ ﺏﻭ ﯼﺎﻫﺭﻭﺮﺳ ﻪﺑ ﺍﺭ HTTP ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺏﻭ ﺮﮔﺭﻭﺮﻣ ﻪﺑ Fetch API ﻂ

😀 ﻪﺑ ﯼﺯﺎﯿﻧ ﺮﮕﯾﺩ 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>

:ﺪﺷﺎﺑ ﺮﺗ ﻥﺎﺳﺁ ﺖﺳﺍ ﻦﮑﻤﻣ ﻻﺎﺑ ﻝﺎﺜﻣ ﮎﺭﺩ ،ﺖﺳﺍ await ﻭ async ﺱﺎﺳﺍ ﺮﺑ 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>

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻢﻬﻓ ﻞﺑﺎﻗ ﯼﺎﻫ ﻡﺎﻧ ﺯﺍ y ﻭ x ﯼﺎﺟ ﻪﺑ :ﺮﺘﻬﺑ ﯽﺘﺣ ﺎﯾ

ﻝﺎﺜﻣ

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>