javascript - Fetch API vs XMLHttpRequest

Viem, že Fetch API používa Promises a oba vám umožňujú robiť AJAX požiadavky na server.

Čítal som, že Fetch API má niektoré doplnkové funkcie, ktoré nie sú dostupné v XMLHttpRequest (a ani v polyfille Fetch API, pretože je založený na XHR).

Aké ďalšie schopnosti má Fetch API?

Odpoveď č. 1

Existuje niekoľko vecí, ktoré môžete robiť s fetch a nie s XHR:

  • Môžete použiť Cache API s objektmi požiadavky a odpovede;
  • Môžete vykonávať požiadavky no-cors, získavajúc odpoveď od servera, ktorý neimplementuje CORS. Nemôžete priamo pristupovať k telu odpovede z JavaScriptu, ale môžete ho použiť s inými API (napr. Cache API);
  • Streamovanie odpovedí (s XHR je celá odpoveď uložená v pamäti, s fetch budete môcť pristupovať k nízkoúrovňovému streamu). Toto ešte nie je dostupné vo všetkých prehliadačoch, ale čoskoro bude.

Existuje niekoľko vecí, ktoré môžete robiť s XHR a ktoré zatiaľ nemôžete robiť s fetch, ale čoskoro budú k dispozícii (prečítajte si odsek „Budúce vylepšenia“ tu: https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/):

  • Zrušiť požiadavku (toto teraz funguje vo Firefoxe a Edge, ako @sideshowbarker vysvetľuje vo svojom komentári);
  • Ohláste pokrok.

Tento článok https://jakearchibald.com/2015/thats-so-fetch/ obsahuje podrobnejší opis.

Odpoveď #2

priniesť

  • chýba vstavaná metóda na spracovanie dokumentov
  • ešte neexistuje spôsob, ako nastaviť časový limit
  • nie je možné prepísať hlavičku odpovede content-type
  • ak je hlavička odpovede content-length prítomná ale nie je zverejnená, celková dĺžka tela je počas streamovania neznáma
  • bude volať obslužnú rutinu prerušenia signálu aj, ak bola požiadavka dokončená
  • žiadny postup nahrávania (podpora pre ReadableStream inštancie ako telá požiadaviek ešte nie je k dispozícii)
  • nepodporuje --allow-file-access-from-files (chromium)

XHR

  • neexistuje spôsob, ako neodoslať cookies (okrem použitia nestandardného parametra mozAnon alebo konštruktora AnonXMLHttpRequest)
  • nemôže vrátiť inštancie FormData
  • nemá ekvivalent k režimu no-cors v fetch
  • vždy nasleduje presmerovania

Odpoveď č. 3

Odpovede vyššie sú dobré a poskytujú dobrý pohľad, ale zdieľam rovnaký názor, ako je uvedené v tomto blogovom príspevku pre vývojárov Google, že hlavný rozdiel (z praktického hľadiska) je pohodlie vstavaného sľubu, ktorý vracia fetch

Namiesto toho, aby ste museli písať kód takto

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

môžeme veci vyčistiť a napísať niečo trochu stručnejšie a čitateľnejšie pomocou sľubov a modernej syntaxe

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

Súvisiace články