javascript - Fetch API vs XMLHttpRequest

Jeg vet at Fetch API bruker Promise-er, og begge lar deg gjøre AJAX-forespørsler til en server.

Jeg har lest at Fetch API har noen ekstra funksjoner, som ikke er tilgjengelige i XMLHttpRequest (og i Fetch API-polyfillen, siden den er basert på XHR).

Hvilke ekstra funksjoner har Fetch APIen?

Svar #1

Det er noen ting du kan gjøre med fetch og ikke med XHR:

  • Du kan bruke Cache API med forespørsels- og responsobjektene;
  • Du kan utføre no-cors-forespørsler og få svar fra en server som ikke implementerer CORS. Du kan ikke få direkte tilgang til svarinnholdet fra JavaScript, men du kan bruke det med andre API-er (f.eks. Cache API);
  • Streaming-responser (med XHR blir hele responsen bufret i minnet, med fetch vil du kunne få tilgang til lavnivåstrømmen). Dette er ikke tilgjengelig ennå i alle nettlesere, men vil bli det snart.

Det finnes et par ting du kan gjøre med XHR som du ennå ikke kan gjøre med fetch, men de vil være tilgjengelige før eller senere (les avsnittet «Fremtidige forbedringer» her: https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/):

  • Avbryt en forespørsel (dette fungerer nå i Firefox og Edge, som @sideshowbarker forklarer i sin kommentar);
  • Rapporter fremgang.

Denne artikkelen https://jakearchibald.com/2015/thats-so-fetch/ inneholder en mer detaljert beskrivelse.

Svar #2

hente

  • mangler en innebygd metode for å konsumere dokumenter
  • ingen måte å sette en tidsavbrudd på ennå
  • kan ikke overstyre svarhodet for innholdstype
  • hvis svarhodet content-length er til stede men ikke eksponert, er kroppens totale lengde ukjent under streaming
  • vil kalle signalets avbryterbehandler selv om forespørselen er fullført
  • ingen opplastingsprogresjon (støtte for ReadableStream-instanser som forespørselskropper kommer snart)
  • støtter ikke --allow-file-access-from-files (chromium)

XHR

  • det finnes ingen måte å ikke sende informasjonskapsler på (bortsett fra å bruke den ikke-standard mozAnon-flaggen eller AnonXMLHttpRequest-konstruktøren)
  • kan ikke returnere FormData-instanser
  • har ikke en tilsvarende til fetchs no-cors-modus
  • følger alltid omdirigeringer

Svar #3

Svarene ovenfor er gode og gir gode innsikter, men jeg deler den samme oppfatningen som delt i dette blogginnlegget fra Google Developers, nemlig at den viktigste forskjellen (fra et praktisk perspektiv) er bekvemmeligheten ved det innebygde løftet som returneres fra fetch

I stedet for å måtte skrive kode som dette

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

vi kan rydde opp og skrive noe litt mer konsist og lesbart med løfter og moderne syntaks

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

Relaterte artikler