web-dev-qa-db-fra.com

Récupérer l'API vs XMLHttpRequest

Je sais que l'API Fetch utilise Promises et que les deux vous permettent de faire des requêtes AJAX à un serveur.

J'ai lu que l'API Fetch possède des fonctionnalités supplémentaires, qui ne sont pas disponibles dans XMLHttpRequest (et dans le polyfill d'API Fetch, car elles sont basées sur XHR).

Quelles sont les fonctionnalités supplémentaires de l'API Fetch?

javascriptajaxxmlhttprequestfetch-api
133
ilyabasiuk

Il y a quelques choses que vous pouvez faire avec fetch et non avec XHR:

  • Vous pouvez utiliser l'API de cache avec les objets request et response.
  • Vous pouvez effectuer des requêtes no-cors, en obtenant une réponse d'un serveur qui n'implémente pas CORS. Vous ne pouvez pas accéder au corps de la réponse directement à partir de JavaScript, mais vous pouvez l'utiliser avec d'autres API (par exemple, l'API Cache).
  • Diffusion des réponses (avec XHR toute la réponse est mise en mémoire tampon, avec fetch, vous pourrez accéder au flux de bas niveau). Ce n'est pas encore disponible dans tous les navigateurs, mais le sera bientôt.

Il y a quelques choses que vous pouvez faire avec XHR que vous ne pouvez pas encore faire avec chercher, mais elles seront disponibles tôt ou tard (lisez le paragraphe "Améliorations futures" ici: https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/ ):

  • Abandonnez une demande (cela fonctionne maintenant dans Firefox et Edge, comme l'explique @sideshowbarker dans son commentaire);
  • Signaler les progrès.

Cet article https://jakearchibald.com/2015/thats-so-fetch/ contient une description plus détaillée.

95
Marco

fetch

  • manque une méthode intégrée pour consommer des documents
  • aucun moyen de définir un délai d'attente encore
  • ne peut pas remplacer l'en-tête de réponse content-type
  • si l'en-tête de la réponse content-length est présent mais non exposé , la longueur totale du corps est inconnue pendant la diffusion.
  • appellera le gestionnaire d'abandon du signal même si la demande est terminée

XHR

  • il n'y a aucun moyen de ne pas envoyer des cookies (mis à part l'utilisation du drapeau non standard mozAnon] ou du AnonXMLHttpRequest constructeur)
  • ne peut pas retourner FormData instances
  • n'a pas d'équivalent au mode no-cors de fetch
  • toujours suivre les redirections
52
Knu

Les réponses ci-dessus sont bonnes et fournissent de bonnes idées, mais je partage le même avis que celui partagé dans ce entrée de blog de développeurs Google en ce que la principale différence (d'un point de vue pratique) réside dans la commodité de la fonction intégrée promesse retournée de fetch

Au lieu d'avoir à écrire un code comme celui-ci

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

nous pouvons nettoyer les choses et écrire quelque chose d'un peu plus concis et lisible avec des promesses et une syntaxe moderne

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