Scarica API vs XMLHttpRequest

So che l'API Fetch utilizza se Promiseentrambi consentono di eseguire richieste AJAX a un server.

Ho letto che l'API Fetch ha alcune funzionalità extra, che non sono disponibili in XMLHttpRequest(e nel polyfill dell'API Fetch, poiché è basato su XHR).

Quali funzionalità extra ha l'API Fetch?

Ci sono alcune cose che puoi fare con fetch e non con XHR:

• È possibile utilizzare l'API della cache con gli oggetti richiesta e risposta;
• È possibile eseguire no-corsrichieste, ottenendo una risposta da un server che non implementa CORS. Non è possibile accedere al corpo della risposta direttamente da JavaScript, ma è possibile utilizzarlo con altre API (ad esempio l'API della cache);
• Streaming di risposte (con XHR l'intera memoria è bufferizzata in memoria, con fetch sarai in grado di accedere al flusso di basso livello). Questo non è ancora disponibile in tutti i browser, ma lo sarà presto.

Ci sono un paio di cose che puoi fare con XHR che non puoi ancora fare con fetch, ma saranno disponibili prima o poi (leggi il paragrafo "Miglioramenti futuri" qui: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Annulla una richiesta (ora funziona in Firefox e Edge, come spiega @sideshowbarker nel suo commento);
• Segnala progressi.

Questo articolo https://jakearchibald.com/2015/thats-so-fetch/ contiene una descrizione più dettagliata.

andare a prendere

• manca un metodo incorporato per consumare documenti
• nessun modo per impostare un timeout ancora
• impossibile sovrascrivere l'intestazione della risposta del tipo di contenuto
• se l'intestazione della risposta della lunghezza del contenuto è presente ma non esposta , la lunghezza totale del corpo è sconosciuta durante lo streaming
• chiamerà il gestore di interruzione del segnale anche se la richiesta è stata completata
• nessun progresso di caricamento (supporto per ReadableStreamistanze in quanto gli organismi di richiesta devono ancora arrivare )

XHR

• non c'è modo di non inviare cookie (a parte l'utilizzo del flag non standardmozAnon o del AnonXMLHttpRequestcostruttore)
• impossibile restituire FormDataistanze
• non ha un equivalente a fetch's no-corsmodalità
• segui sempre i reindirizzamenti

Le risposte sopra sono buone e forniscono buone intuizioni, ma condivido la stessa opinione condivisa in questo post del blog degli sviluppatori di Google in quanto la differenza principale (dal punto di vista pratico) è la comodità della promessa integrata restituita dafetch

Invece di dover scrivere codice in questo modo

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

possiamo ripulire le cose e scrivere qualcosa di più conciso e leggibile con promesse e sintassi moderna

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