Tìm nạp API so với XMLHttpRequest

Tôi biết rằng Fetch API sử dụng Promises và cả hai đều cho phép bạn thực hiện các yêu cầu AJAX đến máy chủ.

Tôi đã đọc rằng Fetch API có một số tính năng bổ sung, không có trong XMLHttpRequest(và trong polyfill API Fetch, vì nó dựa trên XHR).

API Fetch có những khả năng bổ sung nào?

Có một vài điều bạn có thể làm với tìm nạp chứ không phải với XHR:

• Bạn có thể sử dụng API Cache với các đối tượng yêu cầu và phản hồi;
• Bạn có thể thực hiện no-corscác yêu cầu, nhận phản hồi từ máy chủ không triển khai CORS. Bạn không thể truy cập cơ quan phản hồi trực tiếp từ JavaScript, nhưng bạn có thể sử dụng nó với các API khác (ví dụ: API Cache);
• Truyền phản hồi (với XHR, toàn bộ phản hồi được đệm trong bộ nhớ, với quá trình tìm nạp, bạn sẽ có thể truy cập luồng cấp thấp). Điều này chưa có sẵn trong tất cả các trình duyệt, nhưng sẽ sớm thôi.

Có một vài điều bạn có thể làm với XHR mà bạn chưa thể thực hiện với tìm nạp, nhưng chúng sẽ sớm được cung cấp (đọc đoạn "Cải tiến trong tương lai" tại đây: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Hủy bỏ một yêu cầu (điều này hiện đang hoạt động trong Firefox và Edge, như @sIDIAbarker giải thích trong bình luận của anh ấy);
• Báo cáo tiến độ.

Bài viết này https://jakearchibald.com/2015/thats-so-fetch/ chứa một mô tả chi tiết hơn.

lấy

• thiếu một phương thức dựng sẵn để tiêu thụ tài liệu
• có cách nào để thiết lập một thời gian chờ chưa
• không thể ghi đè tiêu đề phản hồi kiểu nội dung
• nếu tiêu đề phản hồi độ dài nội dung có mặt nhưng không được hiển thị , tổng chiều dài của cơ thể sẽ không xác định trong khi truyền phát
• sẽ gọi trình xử lý hủy bỏ tín hiệu ngay cả khi yêu cầu đã được hoàn thành
• không có tiến trình tải lên (hỗ trợ cho các ReadableStreamtrường hợp như các cơ quan yêu cầu vẫn chưa đến )

XHR

• không có cách nào để không gửi cookie (ngoài việc sử dụng cờ không chuẩnmozAnon hoặc hàm AnonXMLHttpRequesttạo)
• không thể trở về FormDatatrường
• không có tương đương với fetchcủa no-corschế độ
• luôn theo dõi chuyển hướng

Các câu trả lời ở trên là tốt và cung cấp thông tin chi tiết tốt, nhưng tôi chia sẻ ý kiến ​​tương tự như được chia sẻ trong mục blog của nhà phát triển google này vì sự khác biệt chính (từ góc độ thực tế) là sự tiện lợi của lời hứa tích hợp được trả về từfetch

Thay vì phải viết mã như thế này

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();

chúng ta có thể dọn dẹp mọi thứ và viết một cái gì đó ngắn gọn và dễ đọc hơn với những lời hứa và cú pháp hiện đại

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