XMLHttpRequest vs l'API Fetch pour Ajax –

Mars 2019 célèbre le 20e anniversaire de l'Ajax. Sorte de. La première implémentation de XMLHttpRequest a été livrée en 1999 en tant que composant ActiveX IE5.0 (ne pas demander) .

Avant, il était possible d'extraire des données d'un serveur. sans actualisation complète de la page, mais ils s’appuient souvent sur des techniques maladroites telles que l’injection ou des plugins tiers. Microsoft a développé XMLHttpRequest primaire pour une alternative au client de messagerie Outlook basée sur un navigateur. XMLHttpRequest n'était pas un standard Web jusqu'en 2006, mais il a été implémenté dans la plupart des navigateurs. Son adoption dans Gmail (2004) et Google Maps (2005) a conduit à l’article de Jesse James Garrett en 2005 AJAX: une nouvelle approche des applications Web . Nouveau terme: focus sur les développeurs cristallisés.

AJAX to Ajax

AJAX est une mnémonique pour JavaScript et XML asynchrones. «Asynchrone» bien sûr, mais:

1. JavaScript était probable, bien que VBScript et Flash fussent des options
2. La charge utile n'avait pas besoin d'être en XML, bien que cela fût populaire à l'époque. Tous les formats de données peuvent être utilisés et, de nos jours, on préfère normalement JSON.

Nous utilisons maintenant «Ajax» comme terme générique pour tout processus côté client qui récupère des données sur un serveur et met à jour le DOM de manière dynamique, sans page entière. rafraîchir. Ajax est une technique essentielle pour la plupart des applications Web et des applications à page unique (SPA).

Extreme XMLHttpRequest

Le code JavaScript suivant illustre une requête HTTP GET de base pour http: // domaine / service . using XMLHttpRequest (généralement abrégé en XHR):

 let xhr = new XMLHttpRequest ();
xhr.open ('GET', 'http: // domaine / service');

// demande d'événement de changement d'état
xhr.onreadystatechange = function () {

  // demande terminée?
  if (xhr.readyState! == 4) renvoie;

  if (xhr.status === 200) {
    // demande réussie - affiche la réponse
    console.log (xhr.responseText);
  }
  autre {
    // erreur de demande
    console.log ('erreur HTTP', xhr.status, xhr.statusText);
  }
};

// demande de démarrage
xhr.send ();

L'objet XMLHttpRequest possède de nombreuses autres options, événements et propriétés de réponse. Par exemple, un délai d'expiration en millisecondes peut être défini et détecté:

 // set timeout
xhr.timeout = 3000; // 3 secondes
xhr.ontimeout = () => console.log ('timeout', xhr.responseURL);

et un événement progress peuvent signaler des téléchargements de fichiers de longue durée:

 // progression du téléchargement
xhr.upload.onprogress = p => {
  console.log (Math.round ((p.loaded / p.total) * 100) + '%');
}

Le nombre d'options peut être déroutant et les premières applications de XMLHttpRequest présentaient quelques incohérences entre les navigateurs. Pour cette raison, la plupart des bibliothèques et des infrastructures offrent des fonctions d'encapsulation Ajax permettant de gérer la complexité, par exemple. la méthode jQuery.ajax () :

 // jQuery Ajax
$ .ajax ('http: // domaine / service')
  .done (data => console.log (data))
  .fail ((xhr, status) => console.log ('erreur:', status));

Fast Forward to Fetch

L'API Fetch est une alternative moderne à XMLHttpRequest . Les interfaces génériques Headers Request et Response assurent la cohérence, tandis que Promises permet un chaînage plus simple et une attente asynchrone sans rappel. L'exemple XHR ci-dessus peut être converti en un code beaucoup plus simple, basé sur Fetch, qui analyse même le code JSON renvoyé:

 fetch (
    'http: // domaine / service',
    {méthode: 'GET'}
  )
  .then (response => response.json ())
  .then (json => console.log (json))
  .catch (error => console.error ('error:', error));

Fetch est propre, élégant, plus simple à comprendre et très utilisé dans PWA Service Workers . Pourquoi ne l’utiliseriez-vous pas à la place de l’ancienne XMLHttpRequest? Malheureusement, le développement Web n’est jamais aussi clair. Fetch ne remplace pas encore complètement les techniques Ajax…

Support du navigateur

L'API Fetch est raisonnablement bien prise en charge mais toutes les éditions d'Internet Explorer échouent. Les personnes utilisant des versions de Chrome, Firefox et Safari antérieures à 2017 peuvent également rencontrer des problèmes. Ces utilisateurs peuvent constituer une infime proportion de votre base d'utilisateurs… ou il peut s'agir d'un client majeur. Vérifiez toujours avant de commencer à coder! En outre, l'API Fetch est plus récente et reçoit davantage de modifications en cours que l'objet XHR mature. Il est peu probable que ces mises à jour rompent le code, mais des travaux de maintenance sont à prévoir au cours des prochaines années.

Cookieless by Default

Contrairement à XMLHttpRequest toutes les implémentations de Fetch n'enverront pas de cookies; l'authentification de votre application pourrait donc échouer. . Le problème peut être résolu en modifiant les options d'initiation passées dans le deuxième argument, par exemple

 fetch (
    'http: // domaine / service',
    {
      méthode: 'GET',
      références: 'même origine'
    }
  )

Les erreurs ne sont pas rejetées

De manière surprenante, une erreur HTTP telle qu'une erreur 404 page introuvable ou 500 Internal Server Error ne provoque pas le rejet de la promesse d'extraction; le .catch () n'est jamais exécuté. Il résoudra normalement avec le statut de response.ok défini sur false. Le rejet ne se produit que si une demande ne peut pas être complétée, par ex. une panne de réseau. Cela peut rendre la capture d'erreur plus compliquée à implémenter.

Les délais d'attente ne sont pas pris en charge

Fetch ne prend pas en charge les délais d'attente et la demande se poursuivra aussi longtemps que le navigateur le choisira. Un code supplémentaire est nécessaire pour insérer le rapport dans une autre promesse, par exemple

 // chercher avec un délai
fonction fetchTimeout (url, init, timeout = 3000) {
  renvoyer une nouvelle promesse ((résoudre, rejeter) => {
    chercher (url, init)
      .then (résoudre)
      .catch (rejet);
    setTimeout (rejet, délai d'attente);
  }
}

… ou peut-être utilisez-vous Promise.race () qui est résolu lorsqu'un premier ou l'autre délai d'expiration s'achève, par exemple

 Promise.race ([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then (response => console.log (response))

Abandon d'une recherche

Il est facile de mettre fin à une demande XHR avec xhr.abort () et, si nécessaire, de détecter un tel événement avec une fonction xhr.onabort . Abandonner une opération de recherche n’était pas possible avant plusieurs années, mais il est désormais pris en charge par les navigateurs qui implémentent l’API AbortController . Cela déclenche un signal qui peut être transmis à l'objet d'initiation Fetch:

 const controller = new AbortController ();

chercher (
  'http: // domaine / service',
  {
    méthode: 'GET'
    signal: control.signal
  })
  .then (response => response.json ())
  .then (json => console.log (json))
  .catch (error => console.error ('Erreur:', erreur));

L'extraction peut être annulée en appelant controller.abort (); . The Promise rejette la fonction .catch () .

Pas de progrès

Au moment de la rédaction de ce document, Fetch n’a aucun support pour les événements de progrès. Il est donc impossible de signaler le statut des téléchargements de fichiers ou de soumissions similaires de formes volumineuses.

XMLHttpRequest vs l'API Fetch?

Enfin, le choix vous appartient… sauf si votre application dispose de clients IE qui demandent des barres de progression de téléchargement. . Pour les appels Ajax plus simples, XMLHttpRequest est de niveau inférieur, plus compliqué et vous aurez besoin de fonctions d'encapsuleur. Malheureusement, il en ira de même pour Fetch une fois que vous aurez commencé à examiner la complexité des délais d'attente, des interruptions d'appel et du recouvrement des erreurs. Vous pouvez opter pour un Fetch polyfill conjointement avec un Promise polyfill . il est donc possible d'écrire du code de récupération dans IE. Cependant, XHR est utilisé comme solution de secours; toutes les options ne fonctionneront pas comme prévu, par exemple les cookies seront envoyés quels que soient les paramètres. Fetch, c'est l'avenir. Cependant, l'API est relativement nouvelle, elle ne fournit pas toutes les fonctionnalités XHR et certaines options sont lourdes. Utilisez-le avec prudence pour les prochaines années.