Ambil API vs XMLHttpRequest

Saya tahu bahwa Ambil API menggunakan Promises dan keduanya memungkinkan Anda untuk melakukan permintaan AJAX ke server.

Saya telah membaca bahwa Fetch API memiliki beberapa fitur tambahan, yang tidak tersedia di XMLHttpRequest(dan dalam polyfill API Fetch, karena didasarkan pada XHR).

Apa kemampuan tambahan yang dimiliki API Ambil?

Ada beberapa hal yang dapat Anda lakukan dengan mengambil dan tidak dengan XHR:

• Anda dapat menggunakan API Cache dengan objek permintaan dan respons;
• Anda dapat melakukan no-corspermintaan, mendapat respons dari server yang tidak menerapkan CORS. Anda tidak dapat mengakses badan tanggapan langsung dari JavaScript, tetapi Anda dapat menggunakannya dengan API lain (mis. API Cache);
• Streaming tanggapan (dengan XHR seluruh respons buffered dalam memori, dengan mengambil Anda akan dapat mengakses aliran tingkat rendah). Ini belum tersedia di semua browser, tetapi akan segera.

Ada beberapa hal yang dapat Anda lakukan dengan XHR yang belum dapat Anda lakukan dengan mengambil, tetapi mereka akan tersedia cepat atau lambat (baca paragraf "Peningkatan masa depan" di sini: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Batalkan permintaan (ini sekarang berfungsi di Firefox dan Edge, seperti yang dijelaskan @sontonbarker dalam komentarnya);
• Laporkan kemajuan.

Artikel ini https://jakearchibald.com/2015/thats-so-fetch/ berisi deskripsi yang lebih rinci.

mengambil

• kehilangan metode bawaan untuk mengkonsumsi dokumen
• ada cara untuk mengatur timeout belum
• tidak dapat mengganti tajuk respons tipe konten
• jika tajuk respons panjang konten ada tetapi tidak terbuka , panjang total tubuh tidak diketahui selama streaming
• akan memanggil penangan abort sinyal meskipun permintaan telah selesai
• tidak ada kemajuan unggahan (dukungan untuk ReadableStreaminstance karena badan permintaan belum datang )

XHR

• tidak ada cara untuk tidak mengirim cookie (selain menggunakan bendera non-standarmozAnon atau AnonXMLHttpRequestkonstruktor)
• tidak dapat mengembalikan FormDatainstance
• tidak memiliki setara dengan fetch's no-corsmodus
• selalu ikuti arahan ulang

Jawaban di atas baik dan memberikan wawasan yang baik, tetapi saya berbagi pendapat yang sama dengan yang dibagikan dalam entri blog pengembang google ini bahwa perbedaan utama (dari perspektif praktis) adalah kenyamanan janji bawaan yang dikembalikan darifetch

Alih-alih harus menulis kode seperti ini

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

kita dapat membersihkan dan menulis sesuatu yang lebih ringkas dan mudah dibaca dengan janji dan sintaksis modern

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