ดึง API กับ XMLHttpRequest

ฉันรู้ว่า Fetch API ใช้Promises และทั้งคู่อนุญาตให้คุณทำคำขอ AJAX ไปยังเซิร์ฟเวอร์

ฉันได้อ่านแล้วว่า Fetch API มีคุณสมบัติพิเศษบางอย่างซึ่งไม่สามารถใช้ได้XMLHttpRequest(และใน Fetch API polyfill เนื่องจากมีพื้นฐานมาจากXHR)

API การดึงข้อมูลมีความสามารถพิเศษใดบ้าง

มีบางสิ่งที่คุณสามารถทำได้ด้วยการดึงข้อมูลและไม่ใช่กับ XHR:

• คุณสามารถใช้ Cache API กับวัตถุที่ร้องขอและตอบสนอง
• คุณสามารถดำเนินการno-corsตามคำขอรับการตอบสนองจากเซิร์ฟเวอร์ที่ไม่ได้ใช้ CORS คุณไม่สามารถเข้าถึงเนื้อหาการตอบสนองโดยตรงจาก JavaScript แต่คุณสามารถใช้กับ API อื่น ๆ (เช่น Cache API)
• สตรีมการตอบกลับ (ด้วย XHR การตอบสนองทั้งหมดจะถูกบัฟเฟอร์ในหน่วยความจำด้วยการดึงข้อมูลคุณจะสามารถเข้าถึงสตรีมระดับต่ำ) ยังไม่พร้อมใช้งานในเบราว์เซอร์ทั้งหมด แต่จะใช้ในไม่ช้า

มีสองสิ่งที่คุณสามารถทำกับ XHR ที่คุณยังไม่สามารถทำได้ แต่พวกมันจะพร้อมใช้งานไม่ช้าก็เร็ว (อ่านย่อหน้า "การปรับปรุงในอนาคต" ที่นี่: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• ยกเลิกคำขอ (ตอนนี้ใช้งานได้ใน Firefox และ Edge ตามที่ @sideshowbarker อธิบายในความคิดเห็นของเขา)
• รายงานความคืบหน้า

บทความนี้https://jakearchibald.com/2015/thats-so-fetch/มีคำอธิบายโดยละเอียดเพิ่มเติม

นำมา

• ไม่มีวิธีการสร้างขึ้นเพื่อใช้เอกสาร
• ไม่มีวิธีการตั้งค่าหมดเวลาเลย
• ไม่สามารถแทนที่ส่วนหัวการตอบกลับประเภทเนื้อหา
• หากส่วนหัวการตอบสนองความยาวเนื้อหามีอยู่แต่ไม่ปรากฏความยาวทั้งหมดของเนื้อหาจะไม่เป็นที่รู้จักในระหว่างการสตรีม
• จะเรียกใช้ตัวจัดการการยกเลิกของสัญญาณแม้ว่าคำขอจะเสร็จสมบูรณ์
• ไม่มีความคืบหน้าในการอัปโหลด (รองรับReadableStreamอินสแตนซ์เนื่องจากยังไม่ได้รับคำขอ)

XHR

• ไม่มีทางที่จะไม่ส่งคุกกี้ (นอกเหนือจากการใช้ธงที่ไม่ได้มาตรฐานmozAnonหรือคอนAnonXMLHttpRequestสตรัคเตอร์)
• ไม่สามารถคืนFormDataอินสแตนซ์
• ไม่ได้เทียบเท่ากับfetch's no-corsโหมด
• ติดตามการเปลี่ยนเส้นทางเสมอ

คำตอบข้างต้นเป็นสิ่งที่ดีและให้ข้อมูลเชิงลึกที่ดี แต่ฉันแบ่งปันความคิดเห็นแบบเดียวกับที่แชร์ในรายการบล็อกนักพัฒนาของ Googleนี้ซึ่งความแตกต่างหลัก (จากมุมมองที่ใช้งานได้จริง) คือความสะดวกสบายของสัญญาในตัวfetch

แทนที่จะต้องเขียนโค้ดแบบนี้

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

เราสามารถทำความสะอาดและเขียนสิ่งที่กระชับและอ่านได้ง่ายขึ้นด้วยคำสัญญาและไวยากรณ์ที่ทันสมัย

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });