web-dev-qa-db-fra.com

Appel vs Ajax

Quelle est la difference entre typical AJAX 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

Voici ce que l'appel fetch renvoie:

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

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

Existe-t-il un moyen pour fetch de renvoyer la même chose qu’un appel classique AJAX?

javascriptajaxfetch-api
36
Darlyn

L'API Fetch a des méthodes intégrées pour différents types de données.
Pour un texte/html normal, vous utiliseriez la méthode text(), qui renvoie également une promesse et la chaîne avec une autre, puis un appel.

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

Les éléments intégrés pour le contenu renvoyé sont les suivants

  • clone () - Crée un clone d'un objet Response.
  • error () - Retourne un nouvel objet Response associé à une erreur réseau.
  • redirect () - Crée une nouvelle réponse avec une URL différente.
  • arrayBuffer () - Retourne une promesse résolue avec un ArrayBuffer.
  • blob () - Retourne une promesse résolue avec un blob.
  • formData () - Retourne une promesse résolue avec un objet FormData.
  • json () - Retourne une promesse résolue avec un objet JSON.
  • text () - Retourne une promesse résolue avec un USVString (text).

Il vous permet également d’envoyer des éléments au serveur, ou 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);
});
36
adeneo

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

Vous devez lire le texte de la réponse dans le code d'extraction.

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

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

7
epascarello