Fetch vs. AjaxCall

Question

Quelle est la différence entre AJAX classique et Fetch API ?

Considérez ce scénario :

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

C'est ce que le fetch l'appel revient :

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

Pourquoi renvoie-t-il des choses différentes ?

Existe-t-il un moyen pour fetch pour retourner la même chose qu'un appel AJAX typique ?

Answer 1

L'API Fetch intègre des méthodes pour différents types de données.
Pour un simple texte/html, vous utiliserez la balise text() qui renvoie également une promesse, et l'enchaîner avec un autre appel then.

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

Les built-ins pour le contenu retourné sont les suivants

• clone() - Crée un clone d'un objet Response.
• error() - Renvoie un nouvel objet Réponse associé à une erreur réseau.
• redirect() - Crée une nouvelle réponse avec une URL différente.
• arrayBuffer() - Renvoie une promesse qui se résout avec un ArrayBuffer.
• blob() - Renvoie une promesse qui se résout avec un Blob.
• formData() - Renvoie une promesse qui se résout avec un objet FormData.
• json() - Renvoie une promesse qui se résout en un objet JSON.
• text() - Renvoie une promesse qui se résout en une USVString (texte).

Il vous permet également d'envoyer des éléments au serveur, d'ajouter vos propres en-têtes, etc.

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

Answer 2

Votre ajaxCall renvoie le responseText de l'objet XMLHttpRequest. Il est en train de le filtrer.

Vous devez lire le texte de la réponse dans le code de récupération.

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

Vous pouvez également utiliser x.json() o x.blob()