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!