Récupérer l'API vs XMLHttpRequest

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

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

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

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

• Vous pouvez utiliser l'API Cache avec les objets de requête et de réponse;
• Vous pouvez effectuer des no-corsrequêtes, obtenir 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 depuis JavaScript, mais vous pouvez l'utiliser avec d'autres API (par exemple l'API Cache);
• Streaming 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 fetch, 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 / ):

• Abandonner une requête (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.

chercher

• manque une méthode intégrée pour consommer des documents
• aucun moyen de définir un délai d' attente encore
• impossible de remplacer l'en-tête de réponse de type de contenu
• si l'en-tête de réponse content-length est présent mais non exposé , la longueur totale du corps est inconnue pendant le streaming
• appellera le gestionnaire d'abandon du signal même si la demande est terminée
• pas de progression de téléchargement (le support des ReadableStreaminstances en tant que corps de requête est encore à venir )

XHR

• il n'y a aucun moyen de ne pas envoyer de cookies (à part l'utilisation du drapeau non standardmozAnon ou du AnonXMLHttpRequestconstructeur)
• impossible de renvoyer des FormDatainstances
• ne dispose pas d'équivalent fetchde » no-corsmode
• suivez toujours les redirections

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

Au lieu d'avoir à écrire du 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) => { ... });