API Fetch ของ JavaScript

การกำหนดและการใช้งาน

fetch() วิธีนี้เริ่มขึ้นกระบวนการรับทรัพยากรจากเซิร์ฟเวอร์

fetch() วิธีนี้กลับมาเป็น Promise ที่มีความหมายเดียวกับ Object Response。

คำเตือน：ไม่จำเป็นต้องใช้ XMLHttpRequest อีกต่อไป

ตัวอย่าง

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

ทดลองด้วยตัวเอง

Fetch มีฐานของ async และ await นี้อาจง่ายต่อการเข้าใจกว่าตัวอย่างนี้:

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

ทดลองด้วยตัวเอง

ใช้ชื่อที่ง่ายต่อการเข้าใจแทน x และ y:

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

ทดลองด้วยตัวเอง

ภาษา

fetch(file)

ตัวแปร

ตัวแปร การอธิบาย
file เลือกตัวเลือกตามความต้องการ ชื่อที่ต้องการของทรัพยากร

ค่าที่กลับมา

ชนิด การอธิบาย
Promise แปลเป็น Object ที่มีความหมายเดียวกับ Response。

Browser Support

fetch() เป็นคุณสมบัติของ ECMAScript6 (ES6)

ทุกเบราซเรอร์สมัยใหม่สนับสนุน ES6 (JavaScript 2015)

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Internet Explorer 11 (และเวอร์ชั่นต่อไป) ไม่สนับสนุน fetch()。