Ein Vergleich der JavaScript -HTTP -Bibliotheken für den Browser

moderne Webentwicklung stützt sich stark auf AJAX -Anfragen. Während das native XMLHttpRequest Objekt diese Funktionalität liefert, bevorzugen viele Entwickler Bibliotheken wie JQuery für eine einfachere AJAX -Handhabung. Dieser Artikel vergleicht zwei beliebte Alternativen: Superagent und Axios und demonstrieren ihre Funktionen durch Anfragen an einen Beispiel -HTTP -Dienst.

Schlüsselunterschiede:

• Sowohl Superagent als auch Axios bieten asynchrone AJAX -Funktionen, sodass andere Code gleichzeitig ausgeführt werden kann.
• Axios nutzt Versprechen und stimmt mit Standard -JavaScript -Praktiken aus, während Superagent einen anderen Ansatz verwendet. Dies macht Axios nahtlos in anderen vielversprechenden Bibliotheken integrierbarer.
• Beide sind gut geeignet für Basic-Get-, Post- und Stellanfragen für APIs, aber es fehlen Funktionen wie die Überwachung des Fortschritts von Upload-Fortschritt in Modern XMLHttpRequest.
• Obwohl der Autor funktional ähnlich ist, findet er die API von Superagent intuitiver. Wenn jedoch die Versprechen -Integration von entscheidender Bedeutung ist, ist Axios die bevorzugte Wahl. XMLHttpRequest bleibt eine praktikable Option für Entwickler, die die Browserkompatibilität bequem verwalten oder nur auf moderne Browser abzielen.

Bibliothek Einführung:

XMLHttpRequest unterstützt sowohl synchrone als auch asynchrone Anfragen. Da JavaScript einsthread ist, blockieren synchrone Anfragen, sodass asynchrone Anfragen zur praktischen Auswahl sind. Sowohl Axios als auch Superagent führen ausschließlich asynchrone Anfragen durch. Da die Anfrage im Hintergrund stattfindet, ist die Antwort nicht sofort verfügbar. Eine Rückruffunktion übernimmt die Antwort, sobald sie empfangen wird.

axios verwendet Versprechen, um diesen Prozess zu verwalten und bietet eine bessere Integration in andere asynchrone Code. Die API von Superagent hält sich nicht an Standardversprechungsmuster. Dies macht AXIOS zu einer robusteren Option bei der Arbeit mit mehreren Bibliotheken oder benutzerdefinierten Versprechen. Superagent verfügt jedoch über eine breitere Anerkennung und ein kleines, aber nützliches Plugin -Ökosystem (z. B. für URL -Präfixen).

Beide Bibliotheken zeichnen sich bei der grundlegenden API -Interaktion (Get, post, put) aus, aber es fehlen fortgeschrittene Funktionen wie Upload -Fortschritts -Tracking in Modern XMLHttpRequest. Ihr primärer Nutzen liegt in ihrer prägnanten, kettenfähigen API für die Anforderungskonfiguration und -ausführung.

Installation:

XMLHttpRequest erfordert keine Installation; Es ist in moderne Browser eingebaut (dh 8 und später). SuperAgent ist ein NPM-Modul, das NPM (mit node.js/io.js enthalten) und einem clientseitigen Verpackungstool wie Browserify benötigt. Axios ist als NPM -Modul, AMD -Modul und als eigenständige JavaScript -Datei verfügbar.

Beispiel -API (Bäckerei -Order -Management):

Dieses Beispiel verwendet eine hypothetische Bäckerei -Order -Management -API:

• Get /orders?start=YYYY-MM-DD&end=YYYY-MM-DD : Ruft Bestellungen innerhalb eines Datumsbereichs ab.
• post /orders : Erstellt eine neue Bestellung.

Daten werden im JSON -Format ausgetauscht. Zum Beispiel zur Bestellung von 3 Schokolade und 5 Zitronenkuchen zur Lieferung am 10. März (Bestellung am 4. Mai):

{
  "chocolate": "3",
  "lemon": "5",
  "delivery": "2015-03-10",
  "placed": "2015-03-04"
}

Erstellen einer neuen Bestellung:

Dies erfordert die Angabe der HTTP -Methode (Post), URL (/orders), Anfrage des Körpers (Bestelldetails) und Inhaltstyp (application/json).

• SuperAgent:

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

• axios:

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!');
  });

• xmlhttprequest:

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'}));

Bestellungen nach Datumsbereich:

Dies beinhaltet das Hinzufügen von Abfrageparametern (start und end).

• SuperAgent:

request.get('/orders')
  .query({start: '2015-04-22', end: '2015-04-29'})
  .accept('json')
  .end(function(err, res) {
    // Handle error and response
  });

• axios:

axios.get(
  '/orders',
  {
    headers: {
      'Accept': 'application/json'
    },
    params: {
      start: '2015-04-22',
      end: '2015-04-29'
    }
  }
);

• xmlhttprequest:

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

Empfehlungen und Schlussfolgerungen:

Axios und Superagent bieten eine ähnliche Funktionalität, wobei Axios 'versprochener Ansatz ein wichtiger Unterscheidungsmerkmal ist. Superagent bietet eine optimiertere API, aber Axios 'Haftung an Versprechen macht sie vielseitiger. XMLHttpRequest bleibt eine gültige Option für Entwickler, die browserspezifische Nuancen bequem verwalten. Die Wahl hängt von den Projektbedürfnissen und den Entwicklerpräferenzen ab. Ein GitHub -Repository (Link, das nicht in der Eingabe angegeben ist) enthält wahrscheinlich die vollständigen Codebeispiele. Der Rest des Eingangstextes besteht aus häufig gestellten Fragen und Antworten, die in dieser Ausgabe für die Kürze nicht enthalten sind.

Das obige ist der detaillierte Inhalt vonEin Vergleich der JavaScript -HTTP -Bibliotheken für den Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!