Fetch API vs XMLHttpRequest

Wiem, że używa Fetch API Promise s i oba pozwalają na wysyłanie żądań AJAX do serwera.

Przeczytałem, że Fetch API ma kilka dodatkowych funkcji, które nie są dostępne w XMLHttpRequest(i w polyfill Fetch API, ponieważ jest na nim oparty XHR).

Jakie dodatkowe możliwości ma Fetch API?

Jest kilka rzeczy, które możesz zrobić za pomocą pobierania, a nie za pomocą XHR:

• Możesz używać Cache API z obiektami żądań i odpowiedzi;
• Możesz występować no-cors żądania, uzyskując odpowiedź z serwera, który nie implementuje mechanizmu CORS. Nie możesz uzyskać dostępu do treści odpowiedzi bezpośrednio z JavaScript, ale możesz jej używać z innymi API (np. Cache API);
• Odpowiedzi strumieniowe (dzięki XHR cała odpowiedź jest buforowana w pamięci, dzięki funkcji pobierania będziesz mieć dostęp do strumienia niskiego poziomu). Nie jest to jeszcze dostępne we wszystkich przeglądarkach, ale wkrótce będzie.

Jest kilka rzeczy, które możesz zrobić z XHR, a których nie możesz jeszcze zrobić za pomocą pobierania, ale będą one dostępne wcześniej czy później (przeczytaj akapit „Przyszłe ulepszenia” tutaj: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Przerwij żądanie (działa to teraz w Firefoksie i Edge, jak wyjaśnia @sideshowbarker w swoim komentarzu);
• Zgłoś postęp.

Ten artykuł https://jakearchibald.com/2015/thats-so-fetch/ zawiera bardziej szczegółowy opis.

sprowadzać

• brakuje wbudowanej metody konsumowania dokumentów
• nie sposób ustawić limit czasu jeszcze
• nie może zastąpić nagłówka odpowiedzi typu treści
• jeśli nagłówek odpowiedzi Content-Length jest obecny, ale nie jest ujawniony , całkowita długość treści jest nieznana podczas przesyłania strumieniowego
• wywoła procedurę obsługi przerwania sygnału, nawet jeśli żądanie zostało zakończone
• brak postępu w przesyłaniu (obsługa ReadableStreaminstancji jako treści żądań jeszcze nie nadeszła )

XHR

• nie ma możliwości, aby nie wysyłać ciasteczek (poza użyciem niestandardowej mozAnonflagi lub AnonXMLHttpRequestkonstruktora)
• nie może wrócić FormData instancji
• nie ma odpowiednika fetch'sno-cors trybu
• zawsze podążaj za przekierowaniami

Powyższe odpowiedzi są dobre i zapewniają dobre spostrzeżenia, ale podzielam tę samą opinię, którą podzieliłem w tym wpisie na blogu Google Developers , ponieważ główną różnicą (z praktycznego punktu widzenia) jest wygoda wbudowanej obietnicy zwróconej zfetch

Zamiast pisać taki kod

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

możemy wszystko uporządkować i napisać coś bardziej zwięzłego i czytelnego z obietnicami i nowoczesną składnią

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