Fetch vs. AjaxCall

Wat is het verschil tussen typische AJAX en Fetch API?

Overweeg dit scenario:

function ajaxCall(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}
ajaxCall('www.testSite').then(x => {
  console.log(x)
}) // returns html of site
fetch('www.testSite').then(x => {
  console.log(x)
}) // returns object with information about call

Dit is wat de fetchoproep retourneert:

Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…}

Waarom levert het verschillende dingen op?

Is er een manier waarop fetchhetzelfde kan retourneren als een typische AJAX-oproep?

Antwoord 1, autoriteit 100%

De Fetch API heeft ingebouwde methoden voor verschillende datatypes.
Voor alleen gewone tekst/html zou je de methode text()gebruiken, die ook een belofte retourneert, en deze aan een andere koppelen en vervolgens aanroepen.

fetch('www.testSite').then( x => { 
    return x.text();
}).then( y => {
    console.log(y);
});

De ingebouwde functies voor de geretourneerde inhoud zijn als volgt

• clone()– Maakt een kloon van een Response-object.
• error()– Retourneert a
  nieuw Response-object gekoppeld aan een netwerkfout.
• redirect()– Creëert een nieuwe reactie met een andere URL.
• arrayBuffer()– Retourneert een belofte die wordt opgelost met een ArrayBuffer.
• blob()– Retourneert een belofte die wordt opgelost met een Blob.
• formData()– Retourneert een belofte die wordt opgelost met een FormData-object.
• json()– Retourneert een belofte die wordt opgelost met een JSON-object.
• text()– Retourneert een belofte die wordt opgelost met een USVString (tekst).

Het stelt je ook in staat om dingen naar de server te sturen, of je eigen headers toe te voegen, enz.

fetch('www.testSite', {
    method  : 'post',
    headers : new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    }),
    body    : new FormData(document.getElementById('myform'))
}).then( response => {
    return response.json(); // server returned valid JSON
}).then( parsed_result => {
    console.log(parsed_result);
});

Antwoord 2, autoriteit 16%

Uw ajaxCall retourneert de responseText van het XMLHttpRequest-object. Het filtert het eruit.

U moet de antwoordtekst in de ophaalcode lezen.

fetch('/foo/').then(x => x.text()).then(console.log)

U kunt ook x.json()of x.blob()

gebruiken