Une comparaison des bibliothèques HTTP JavaScript pour le navigateur

Le développement Web moderne repose fortement sur les demandes AJAX. Alors que l'objet natif XMLHttpRequest fournit cette fonctionnalité, de nombreux développeurs préfèrent utiliser des bibliothèques comme jQuery pour une manipulation AJAX plus simple. Cet article compare deux alternatives populaires: SuperAgent et Axios, démontrant leurs capacités grâce à des demandes à un exemple de service HTTP.

Différences de clés:

• SuperAgent et Axios offrent des capacités ajax asynchrones, permettant à un autre code d'exécuter simultanément.
• Axios exploite les promesses, s'alignant avec les pratiques JavaScript standard, tandis que SuperAgent utilise une approche différente. Cela rend Axios plus intégrable avec d'autres bibliothèques basées sur les promesses.
• Les deux sont bien adaptés à des demandes de base Get, Publié et posent les API, mais manquent de fonctionnalités telles que la surveillance des progrès de téléchargement trouvé dans moderne XMLHttpRequest.
• Bien que fonctionnellement similaire, l'auteur trouve l'API de SuperAgent plus intuitive. Cependant, si l'intégration des promesses est cruciale, Axios est le choix préféré. XMLHttpRequest reste une option viable pour les développeurs à l'aise de gérer la compatibilité des navigateurs ou de cibler les navigateurs modernes uniquement.

Introduction de la bibliothèque:

XMLHttpRequest prend en charge les demandes synchrones et asynchrones. Étant donné que JavaScript est unique, les demandes synchrones demandent l'exécution de l'exécution, faisant des demandes asynchrones du choix pratique. Axios et SuperAgent effectuent exclusivement des demandes asynchrones. Parce que la demande se produit en arrière-plan, la réponse n'est pas immédiatement disponible. Une fonction de rappel gère la réponse une fois qu'elle est reçue.

Axios utilise des promesses pour gérer ce processus, offrant une meilleure intégration avec un autre code asynchrone. L'API de SuperAgent n'adhère pas aux modèles de promesse standard. Cela fait d'Axios une option plus robuste lorsque vous travaillez avec plusieurs bibliothèques ou des promesses personnalisées. SuperAgent, cependant, possède une reconnaissance plus large et un écosystème de plugin petit mais utile (par exemple, pour le préfixe d'URL).

Les deux bibliothèques excellent à l'interaction de base de l'API (obtenir, publier, mettre), mais manquent de fonctionnalités avancées comme le suivi des progrès disponibles dans moderne XMLHttpRequest. Leur principal avantage réside dans leur API concise et chaînable pour la configuration et l'exécution de la demande.

Installation:

XMLHttpRequest ne nécessite aucune installation; Il est intégré à des navigateurs modernes (IE8 et plus tard). SuperAgent est un module NPM, nécessitant NPM (inclus avec Node.js / io.js) et un outil d'emballage côté client comme Browserify. Axios est disponible en tant que module NPM, un module AMD et un fichier JavaScript autonome.

Exemple API (gestion de l'ordre de boulangerie):

Cet exemple utilise une API de gestion de l'ordre de boulangerie hypothétique:

• Get /orders?start=YYYY-MM-DD&end=YYYY-MM-DD : récupère les commandes dans une plage de dates.
• Post /orders : Crée un nouvel ordre.

Les données sont échangées au format JSON. Par exemple, pour commander 3 gâteaux de chocolat et 5 citron pour la livraison le 10 mars (commande passée le 4 mai):

<code class="language-json">{
  "chocolate": "3",
  "lemon": "5",
  "delivery": "2015-03-10",
  "placed": "2015-03-04"
}</code>

Création d'un nouvel ordre:

Cela nécessite de spécifier la méthode HTTP (POST), URL (/orders), le corps de demande (détails de commande) et le type de contenu (application/json).

• SuperAgent:

<code class="language-javascript">var request = require('superagent');

request.post('/orders/')
  .send({'chocolate': 2, 'placed': '2015-04-26'})
  .type('application/json')
  .accept('json')
  .end(function(err, res) {
    if (err) {
      console.log('Error!');
    } else {
      console.log(res.body);
    }
  });</code>

• axios:

<code class="language-javascript">axios.post(
  '/orders/',
  {
    chocolate: 2,
    placed: '2015-04-26'
  },
  {
    headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(response) {
    console.log('Error!');
  });</code>

• xmlhttprequest:

<code class="language-javascript">var xhr = new XMLHttpRequest();
xhr.open('POST', '/orders/', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.log('Error!');
  }
};
xhr.send(JSON.stringify({chocolate: 2, placed: '2015-04-26'}));</code>

Récupération des commandes par plage de dates:

Cela implique d'ajouter des paramètres de requête (start et end).

• SuperAgent:

<code class="language-javascript">request.get('/orders')
  .query({start: '2015-04-22', end: '2015-04-29'})
  .accept('json')
  .end(function(err, res) {
    // Handle error and response
  });</code>

• axios:

<code class="language-javascript">axios.get(
  '/orders',
  {
    headers: {
      'Accept': 'application/json'
    },
    params: {
      start: '2015-04-22',
      end: '2015-04-29'
    }
  }
);</code>

• xmlhttprequest:

<code class="language-javascript">var xhr = new XMLHttpRequest();
xhr.open('GET', '/orders?start=' + encodeURIComponent('2015-04-22') + '&end=' + encodeURIComponent('2015-04-29'), true);
// ...rest of the code</code>

Recommandations et conclusion:

Axios et SuperAgent offrent des fonctionnalités similaires, l'approche basée sur les promesses d'Axios étant un différenciateur clé. SuperAgent fournit une API plus rationalisée, mais l'adhésion d'Axios aux promesses le rend plus polyvalent. XMLHttpRequest reste une option valable pour les développeurs à l'aise de gérer les nuances spécifiques au navigateur. Le choix dépend des besoins du projet et des préférences des développeurs. Un référentiel GitHub (lien non fourni dans l'entrée) contient probablement les exemples de code complets. Le reste du texte d'entrée consiste en des questions et réponses fréquemment posées qui ne sont pas incluses dans cette sortie pour conciliation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!