JavaScript ดึง 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 |
ตัวอย่าง API การดึงข้อมูล
ตัวอย่างด้านล่างดึงไฟล์และแสดงเนื้อหา:
ตัวอย่าง
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);
}