Die Interaktion zwischen dem Frontend und dem Backend von Websites wird durch HTTP-Anfragen ermöglicht. Funktionen wie das Aktualisieren eines neuen/alten Benutzers in einer Datenbank, das Veröffentlichen eines Blogbeitrags in deinem WordPress-Dashboard, das Löschen eines Bildes aus deinem Profil und das Aktualisieren deines Lebenslaufs erfordern alle eine Interaktion zwischen einem Server und einem Client, um Daten zu ändern.

Bei der Entwicklung von Webanwendungen — sowohl Frontend- als auch Full-Stack-Webanwendungen — interagieren wir oft mit Daten, die auf verschiedenen Datenbanken und Servern gespeichert sind. Diese Server können Dritten gehören oder von den Entwicklern eines Projekts erstellt werden.

Um mit diesen Servern zu interagieren, können wir verschiedene HTTP-Methoden verwenden, um Daten anzufordern. Mit speziellen HTTP-Verben wie POST, GET, PUT/PATCH und DELETE können wir Daten auf Servern erstellen, lesen, aktualisieren und löschen (oder CRUD).

In diesem Lernprogramm lernst du die verschiedenen Möglichkeiten kennen, mit denen du HTTP-Anfragen an entfernte Server stellen und CRUD-Operationen in JavaScript durchführen kannst.

In jedem Abschnitt wird eine neue Methode zum Senden von HTTP-Anfragen vorgestellt. Wir beginnen mit den eingebauten Methoden wie der Fetch-API und dem XMLHttpRequest-Objekt, bevor wir uns einige Open-Source-HTTP-Anfrage-Bibliotheken wie Axios und SuperAgent ansehen.

Los geht’s!

Was ist eine JavaScript-HTTP-Anfrage?

HTTP-Anfragen in JavaScript sind eine Reihe von vordefinierten Methoden, um mit Daten auf Servern zu interagieren.

Jede Anfrage, die an einen Server gesendet wird, enthält einen Endpunkt und die Art der Anfrage, die gesendet wird. Du kannst einen Endpunkt als Gateway zwischen zwei Programmenː dem Client und dem Server sehen.

Der Client ist das Programm, das eine Anfrage sendet, während der Server die Anfrage empfängt. Je nach Gültigkeit der Anfrage sendet der Server eine Antwort zurück. Wenn die Anfrage erfolgreich war, sendet der Server die Daten entweder im XML- oder JSON-Format (in den meisten Fällen JSON) zurück, und wenn die Anfrage fehlschlägt, sendet der Server eine Fehlermeldung.

Die Antworten, die der Server zurückschickt, sind normalerweise mit Statuscodes versehen. Diese Codes helfen uns zu verstehen, was der Server mit einer Anfrage sagen will. Hier sind einige von ihnen und was sie bedeuten:

  • 100-199 bedeutet eine informatorische Antwort.
  • 200-299 steht für eine erfolgreiche Anfrage.
  • 300-399 bezeichnet eine Umleitung.
  • 400-499 bezeichnet einen Client-Fehler.
  • 500-599 bezeichnet einen Serverfehler.

In den folgenden Abschnitten werden wir mehr über einige dieser Codes erfahren.

Im nächsten Abschnitt lernst du die verschiedenen Möglichkeiten kennen, wie du HTTP-Anfragen in JavaScript stellen kannst.

Wie man eine HTTP-Anfrage in JavaScript stellt

Dieser Abschnitt ist in Unterabschnitte gegliedert, in denen du verschiedene Methoden für HTTP-Anfragen in JavaScript kennen lernst.

Für jede Methode gibt es ein Beispiel, das zeigt, wie du POST-, GET-, PUT/PATCH- und DELETE-Anfragen an Server senden kannst.

Der JSON-Platzhalter dient als Remote-Server/Endpunkt, an den alle unsere Anfragen gesendet werden.

Lasst uns eintauchen!

1. Wie man eine HTTP-Anfrage in JavaScript mit XMLHttpRequest (AJAX) stellt

XMLHttpRequest ist ein integriertes JavaScript-Objekt, das für die Interaktion mit Servern und das Laden von Inhalten in Webseiten verwendet wird, ohne den Browser neu zu laden.

In diesem Abschnitt erfährst du, wie du mit XMLHttpRequest POST-, GET-, PUT/PATCH- und DELETE-Anfragen senden kannst.

AJAX wird verwendet, um asynchrone HTTP-Anfragen zu stellen. Das bedeutet einfach, dass andere Teile deines JavaScript-Codes weiterlaufen können, während die Antwort auf eine Anfrage noch aussteht, ohne dass du warten musst, bis die Anfrage abgeschlossen ist.

Mit AJAX kannst du auch Änderungen an einem bestimmten Abschnitt deiner Webseite vornehmen, ohne dass der Besucher gezwungen ist, die gesamte Seite neu zu laden.

AJAX arbeitet standardmäßig mit dem XMLHttpRequest-Objekt, daher können die Beispiele in diesem Abschnitt als AJAX-Anfragen betrachtet werden.

Wie man eine GET-Anfrage in JavaScript mit XMLHttpRequest sendet

Du verwendest die GET-Anfrage, wenn du Daten von einem Server abrufen willst. Um eine erfolgreiche GET-Anfrage mit XMLHttpRequest in JavaScript zu senden, solltest du sicherstellen, dass die folgenden Schritte korrekt ausgeführt werden:

  1. Erstelle ein neues XMLHttpRequest-Objekt.
  2. Öffne eine Verbindung, indem du den Anfragetyp und den Endpunkt (die URL des Servers) angibst.
  3. Sende die Anfrage ab.
  4. Warte auf die Antwort des Servers.

Nachdem wir nun einige der Schritte gesehen haben, die zum Senden einer POST-Anfrage mit XMLHttpRequest gehören, sehen wir uns ein Codebeispiel anː

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Wir werden den obigen Code aufschlüsseln, damit du besser verstehst, was hier passiert.

Als Erstes haben wir ein neues XMLHttpRequest-Objekt erstellt und es in einer Variablen namens xhr gespeichert. Das ist:

const xhr = new XMLHttpRequest();

Wir haben dann den Anfragetyp (GET) und den Endpunkt angegeben, an den die Anfrage gesendet werden soll (in diesem Fall „https://jsonplaceholder.typicode.com/users„)ː

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

Um die Anfrage an den Server zu senden, haben wir die Methode send() verwendet.

Wenn der Server Daten zurücksendet, kannst du das Format angeben, in dem die Daten zurückgegeben werden.

In den meisten Fällen wird JSON verwendet. Wir haben also sichergestellt, dass unsere Daten im JSON-Format zurückgegeben werden, indem wir dies hinzugefügt haben:

xhr.responseType = "json";

An diesem Punkt haben wir erfolgreich eine GET-Anfrage gesendet. Als Nächstes müssen wir mit einem Ereignis-Listener abhören, was der Server sagt:

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Im obigen Code verwenden wir den onload Event-Listener. Mit einer if -Anweisung haben wir den Status der Serverantwort überprüft.

Wenn der Status des Clients 4 (DONE) ist und der Statuscode 200 (erfolgreich) lautet, werden die Daten auf der Konsole protokolliert. Andernfalls wird eine Fehlermeldung mit dem Fehlerstatus angezeigt.

Wenn du bis zu diesem Punkt ohne Fehler weitergearbeitet hast, solltest du ein Array von Objekten in deiner Konsole habenː

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Das sind die Daten, die du vom Server erhalten hast.

Wie man eine POST-Anfrage in JavaScript mit XMLHttpRequest sendet

Mit der POST-Anfrage kannst du neue Informationen (Daten) als Objekt an den Server/die Datenbank senden. Bei dem Objekt kann es sich um Informationen über einen neuen Benutzer, einen neuen Eintrag in der Aufgabenliste oder etwas anderes handeln, das du protokollieren möchtest.

Das Codebeispiel, das du in diesem Abschnitt siehst, ähnelt dem aus dem letzten Abschnitt. Der Hauptunterschied besteht darin, dass POST-Anfragen einige Informationen erfordern, die normalerweise in einem Objekt gespeichert werden, bevor sie an den Server gesendet werden.

Hier ist ein Beispiel:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 201) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

Im obigen Code werden die Informationen, die an den Server gesendet werden sollen, in einer Variablen namens body gespeichert. Sie enthält drei Eigenschaftenː title, body, und userId.

Beachte, dass die Variable body, die das Objekt enthält, in ein JSON-Objekt umgewandelt werden muss, bevor sie an den Server gesendet wird. Die Umwandlung erfolgt mit der Methode JSON.stringify().

Um sicherzustellen, dass das JSON-Objekt an den Server gesendet wird, wird es als Parameter an die Methode send() übergeben:

xhr.send(body);

Wie man eine PATCH-Anfrage in JavaScript mit XMLHttpRequest sendet

Die PATCH-Anfrage wird verwendet, um bestimmte Eigenschaften eines Objekts zu aktualisieren. Sie unterscheidet sich von der PUT-Methode, mit der das gesamte Objekt aktualisiert wird.

Hier ist ein Beispiel für eine PATCH-Anfrage mit XMLHttpRequest in JavaScript:

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
  body: "My PATCH request",
});
xhr.onload = () => {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

Der obige Code protokolliert im Erfolgsfall den Teil des Objekts, der aktualisiert und an den Server gesendet wurde.

Wie man eine DELETE-Anfrage in JavaScript mit XMLHttpRequest sendet

Wie der Name schon sagt, wird die DELETE-Methode verwendet, um Daten von einem Server zu löschen. Das gilt für jede JavaScript-HTTP-Methode.

In den meisten Fällen musst du die ID der Daten angeben, die du löschen willst. Die ID ist normalerweise ein Parameter im Endpunkt/URL.

Hier ein Beispiel für eine DELETE-Anfrageː

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send();

Der obige Code löscht ein Objekt mit einem Beitrag mit der ID 3, wie im Endpunkt angegeben („https://jsonplaceholder.typicode.com/posts/3„).

2. Wie man eine HTTP-Anfrage in JavaScript mit jQuery stellt

jQuery vereinfacht das Abrufen von Daten von Servern, indem es die Syntax kürzer und unkomplizierter macht.

In diesem Abschnitt erfährst du, wie du HTTP-Anfragen mit verschiedenen jQuery-Methoden stellst.

Wie man eine GET-Anfrage in JavaScript mit jQuery sendet

jQuery stellt uns die Methode $.get() zur Verfügung, um GET-Anfragen an Server zu senden. Die Methode nimmt zwei Parameter entgegen — die URL zum Server und eine Callback-Funktion, die ausgeführt wird, wenn die Anfrage erfolgreich ist.

Hier ist ein Beispiel:

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

Wie im obigen Code zu sehen ist, hat die Methode $.get() die URL (https://jsonplaceholder.typicode.com/users) und eine anonyme Callback-Funktion als Parameter.

Über die Callback-Funktion kannst du auf die Daten der Anfrage und den Status der Anfrage zugreifen. In unserem Fall haben wir die Daten auf der Konsole protokolliert.

So einfach ist es, eine GET-Anfrage mit jQuery zu senden.

Wie man eine POST-Anfrage in JavaScript mit jQuery sendet

Um eine POST-Anfrage mit jQuery zu senden, verwenden wir die Methode $.post(). Sie benötigt drei Parameter: die URL, die Daten, die an den Server gesendet werden sollen, und eine Callback-Funktion.

const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
  console.log(data);
});

Im obigen Code haben wir ein Objekt erstellt, das an den Server gesendet werden soll, und es in einer Variablen namens body gespeichert. Diese Variable wurde in der Methode $.post() als zweiter Parameter übergeben.

Mit der Callback-Funktion haben wir das Ergebnis der Anfrage auf der Konsole protokolliert.

3. Wie man in jQuery mit der Methode $.ajax() asynchrone Anfragen stellt

Bevor wir mit dem Senden von PATCH- und DELETE-Anfragen fortfahren, lass uns über die Methode $.ajax() sprechen.

Die Methode $.ajax() in jQuery wird verwendet, um asynchrone Anfragen zu stellen.

Die Syntax unterscheidet sich von den anderen Methoden.

Hier siehst du, wie du eine GET-Anfrage mit der Methode $.ajax() stellst:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

Die Methode $.ajax() hat verschiedene Parameter, die wir verwenden können.

Im obigen Code gibt der Parameter url die URL zum Server an, der Parameter type den Anfragetyp und der Parameter success ruft eine Callback-Funktion auf, wenn die Anfrage erfolgreich ist.

Im nächsten Abschnitt erfährst du, wie du PATCH- und DELETE-Anfragen mit der $.ajax() Methode von jQuery senden kannst.

Wie man eine PATCH-Anfrage in JavaScript mit der jQuery-Methode $.ajax() sendet

In diesem Abschnitt erfährst du, wie du mit der jQuery-Methode $.ajax() PATCH-Anfragen sendest.

Hier ist der Code:

const body = JSON.stringify({
  body: "My PATCH request",
});
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/101",
  type: "PATCH",
  data: body,
  success: function (result) {
    console.log(result);
  },
});

Im obigen Code wird die Eigenschaft, die aktualisiert werden soll, in der Variablen body gespeichert. Diese wird dann als Wert für den Parameter data verwendet.

Wenn die Anfrage erfolgreich ist, wird die Funktion für den Parameter success ausgeführt.

So sendest du eine DELETE-Anfrage in JavaScript mit der Methode $.ajax() von jQuery

Um eine DELETE-Anfrage mit der Methode $.ajax() von jQuery zu senden, sind nur ein paar Zeilen Code erforderlich.

Hier ist ein Beispiel:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/3",
  type: "DELETE",
  success: function (result) {
    console.log(result)
  },
});

Wie oben zu sehen ist, mussten wir nur die URL mit der ID des zu löschenden Objekts, die Art der Anfrage und eine Funktion angeben, die ausgeführt wird, wenn die Anfrage erfolgreich ist.

Wie man die $.getJSON-Methode in jQuery verwendet

Die Methode $.getJSON bietet eine kürzere Möglichkeit, GET-Anfragen zu senden.

Um eine erfolgreiche Anfrage zu stellen, musst du nur die URL und die Callback-Funktion angeben. Hier ist ein Beispiel:

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

Im obigen Code haben wir die URL an den Server und die Funktion, die nach erfolgreicher Anfrage ausgeführt wird, als Parameter an die Methode $.getJSON übergeben.

Der obige Code protokolliert ein Array von Objekten mit Benutzerinformationen auf der Konsole.

4. Wie man eine HTTP-Anfrage in JavaScript mit der Fetch-API stellt

Die fetch API ist eine der beliebtesten Möglichkeiten, mit JavaScript mit Servern zu interagieren. Es handelt sich dabei um eine native JavaScript-API, die beim Stellen von Anfragen Versprechen unterstützt.

Die Syntax der fetch API ist sehr einfach zu verstehen, wie du in den folgenden Abschnitten sehen wirst.

Wie man eine GET-Anfrage in JavaScript mit der Fetch-API sendet

Um eine GET-Anfrage mit der fetch API zu senden, brauchst du nur die URL. Diese gibt dann ein Versprechen zurück, auf das du mit der Methode then() oder den Schlüsselwörtern async und await zugreifen kannst.

Schauen wir uns ein Beispiel an:

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

Im obigen Code haben wir die URL an die Methode fetch übergeben; diese gibt ein Versprechen zurück. Anschließend haben wir mit der Methode then() auf die Antwort des Servers zugegriffen. Die Antwort wurde mit der Methode response.json() in ein JSON-Objekt umgewandelt.

Nachdem wir die Antwort erhalten haben, verwenden wir eine weitere then() Methode, um die Daten auf der Konsole auszugeben.

Wie man eine POST-Anfrage in JavaScript mit der Fetch-API sendet

Die Fetch-Methode hat einen zweiten Parameter, mit dem wir den Body (die zu sendenden Daten) und den Typ der zu sendenden Anfrage angeben können. Mit diesem zweiten Parameter können wir POST- und PATCH-Anfragen senden.

Sieh dir diesen Beispielcode an:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Im obigen Code haben wir im zweiten Parameter der Methode fetch Anfrageoptionen hinzugefügt. method wurde verwendet, um den Anfragetyp festzulegen, body gab die Daten an, die an den Server gesendet werden sollten, und headers wurde verwendet, um festzulegen, dass wir JSON-Daten an den Server senden würden.

Wie beim Senden einer GET-Anfrage wurde das zurückgesendete Versprechen/die Antwort mit der Methode then() abgerufen.

Wie man eine PUT-Anfrage in JavaScript mit der Fetch-API sendet

In anderen Abschnitten, in denen wir eine Anfrage gesendet haben, um ein Objekt auf dem Server zu aktualisieren, haben wir PATCH verwendet. In diesem Abschnitt werden wir PUT verwenden, mit dem du ein Objekt vollständig aktualisieren kannst.

Hier ist ein Beispiel, das die fetch API verwendet:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

Da wir eine PUT-Anfrage senden, müssen wir die zu aktualisierenden Daten angeben, die als Wert an die Anfrageoption body übergeben werden.

Außerdem haben wir die ID des zu aktualisierenden Objekts als letzten Parameter in der URL angegeben. Wenn die Anfrage erfolgreich ausgeführt wird, solltest du das aktualisierte Objekt in der Konsole sehen.

So sendest du eine DELETE-Anfrage in JavaScript mit der Fetch-API

Eine DELETE-Anfrage zu senden ist ziemlich einfach — du musst nur die ID des zu löschenden Objekts angeben. Du kannst die Methode then() verwenden, um die Antwort vom Server zu erhalten, wie wir es bei den anderen Anfragen getan haben.

Hier ist ein kurzes Beispiel:

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

Der obige Code löscht ein Objekt mit einer ID von 3.

5. Wie man eine HTTP-Anfrage in JavaScript mit Axios stellt

Axios ist eine auf Versprechen basierende Bibliothek eines Drittanbieters zum Senden von HTTP-Anfragen. Wie die meisten modernen HTTP-Clients vereinfacht sie den Prozess, der mit dem Senden von Anfragen an einen Server verbunden ist.

In diesem Abschnitt erfährst du, wie du mit Axios GET-, POST-, PUT- und DELETE-Anfragen an einen Server senden kannst.

Beachte, dass Axios nicht in JavaScript integriert ist — du musst es separat installieren, um seine Funktionen nutzen zu können. Um Axios in deinem Projekt zu installieren, führe den folgenden Befehl im Terminal deines Projekts aus:

npm install axios

Wie man eine GET-Anfrage in JavaScript mit Axios sendet

Um eine GET-Anfrage mit Axios zu senden, musst du nur die URL an die Methode get() übergeben, die ein Versprechen zurückgibt. Auf die Antwort aus dem Versprechen kannst du mit der Methode then() zugreifen.

Sehen wir uns ein Beispiel an:

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

Der obige Code loggt ein Array von Objekten aus, das die vom Server zurückgegebenen Daten enthält. Du wirst feststellen, dass wir die zurückgegebenen Objekte nicht in JSON-Objekte umwandeln müssen — Axios erledigt das im Hintergrund, und du kannst mit response.data auf die Daten zugreifen.

Um eventuelle Fehler abzufangen, haben wir die Methode catch() verwendet.

Wie man eine POST-Anfrage in JavaScript mit Axios sendet

Die POST-Anfrage in Axios benötigt zwei Parameter — die URL und die Daten, die an den Server gesendet werden sollen. Du kannst die Daten in einer Variablen speichern oder sie direkt als Parameter übergeben.

So geht’s:

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "POST request with Axios",
  body: "POST request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Im obigen Beispiel senden wir Daten an den Server. Die Daten werden als zweiter Parameter an die Methode post() übergeben.

Wenn die Anfrage erfolgreich gesendet wurde, siehst du das Ergebnis auf der Konsole.

Wie man eine PUT-Anfrage in JavaScript mit Axios sendet

Das Senden einer PUT-Anfrage mit Axios ist ähnlich wie das Senden einer POST-Anfrage. Um eine PUT-Anfrage zu senden, gibst du die URL (einschließlich der ID des zu aktualisierenden Objekts) und die zu aktualisierenden Daten als zweiten Parameter in der Methode put() an.

Im folgenden Beispiel wird ein Objekt mit der ID 10 aktualisiert:

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
  title: "PUT request with Axios",
  body: "PUT request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

Wie man eine DELETE-Anfrage in JavaScript mit Axios sendet

Um eine DELETE-Anfrage zu senden, gibst du die ID des zu löschenden Objekts in der URL an.

Wie üblich musst du die URL zusammen mit der ID des zu löschenden Objekts angeben.

Hier ist ein Beispiel:

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

6. Wie man eine HTTP-Anfrage in JavaScript mit SuperAgent stellt

SuperAgent ist eine der ältesten Bibliotheken, um HTTP-Anfragen in JavaScript zu stellen. Genau wie Axios unterstützt sie Versprechen und hat vorgefertigte Methoden, um verschiedene HTTP-Anfragen an Server zu senden.

Um SuperAgent zu verwenden, installiere es mit dem unten stehenden Befehl:

npm install superagent

Wir beginnen mit einem Beispiel für eine GET-Anfrage.

Wie man eine GET-Anfrage in JavaScript mit SuperAgent sendet

SuperAgent stellt uns eine get() Methode zum Senden von GET-Anfragen zur Verfügung. Die URL wird als Parameter der Methode übergeben.

Das Versprechen, das von der Anfrage zurückgegeben wird, kann dann mit der Methode end() bewertet werden, wie in diesem Beispiel zu sehen ist:

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

Wie man eine POST-Anfrage in JavaScript mit SuperAgent sendet

Wenn du eine POST-Anfrage mit SuperAgent sendest, übergibst du die Daten, die an den Server gesendet werden sollen, als Parameter an die send() Methode von SuperAgent:

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
  title: "POST request with SuperAgent",
  body: "POST request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Im obigen Code wurde die URL als Parameter für die Methode post() übergeben. Die zu sendenden Daten wurden an die Methode send() übergeben. Mit der Methode end() erhalten wir das Ergebnis der Serverantwort.

Wie man eine PUT-Anfrage in JavaScript mit SuperAgent sendet

Du kannst eine PUT-Anfrage in SuperAgent mit der Methode put() senden. Genau wie im letzten Abschnitt werden die zu aktualisierenden Daten als Parameter an die Methode send() übergeben.

Hier ist ein Beispiel:

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
  title: "PUT request with SuperAgent",
  body: "PUT request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

Wie man eine DELETE-Anfrage in JavaScript mit SuperAgent sendet

Um eine Löschanfrage zu senden, gibst du einfach die ID des zu löschenden Objekts in der URL an. Diese wird als Parameter in der Methode delete() verwendet.

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

7. Wie man eine HTTP-Anfrage in JavaScript mit Qwest stellt

Qwest ist eine AJAX-Bibliothek für die Interaktion mit Servern. Sie ist derzeit auf GitHub archiviert — der Ersteller hat die Pflege der Bibliothek mit dem Aufkommen der fetch API und Axios eingestellt.

Qwest unterstützt auch die Verwendung von Versprechen.

In den folgenden Unterabschnitten erfährst du, wie du mit Qwest GET-, POST-, PUT- und DELETE-Anfragen senden kannst.

Wie man eine GET-Anfrage in JavaScript mit Qwest sendet

Qwest hat eine get() Methode, mit der du GET-Anfragen senden kannst. Hier erfährst du, wie du sie verwendest:

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

Wie man eine POST-Anfrage in JavaScript mit Qwest sendet

Als zweiter Parameter werden die Daten, die an einen Server gesendet werden sollen, an die Methode post() übergeben. Der erste Parameter ist die URL.

Hier ist ein Beispiel:

qwest.post("https://jsonplaceholder.typicode.com/posts", {
  title: 'POST request with Qwest',
  body: 'POST request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Wie man eine PUT-Anfrage in JavaScript mit Qwest sendet

Die Syntax ist dieselbe wie im vorherigen Abschnitt. Du musst nur den Anfragetyp ändern und dann die ID des zu aktualisierenden Objekts sowie die Daten angeben, mit denen du das Objekt aktualisieren möchtest.

Sieh dir dieses Beispiel an:

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
  title: 'PUT request with Qwest',
  body: 'PUT request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Beachte, dass die ID in der URL angegeben wird und nicht in dem Objekt, das an den Server gesendet wird.

Wie man eine DELETE-Anfrage in JavaScript mit Qwest sendet

Um ein Objekt von einem Server zu löschen, musst du wie üblich die URL und die ID des zu löschenden Objekts angeben. Sowohl die URL als auch die ID des zu löschenden Objekts werden als Parameter an die Methode delete() in Qwest übergeben.

Hier ist ein Beispiel:

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

Sobald die Anfrage erfolgreich ausgeführt wurde, wird ein Objekt mit der ID 30 gelöscht.

Zusammenfassung

Unsere Fähigkeit, mit Hilfe von JavaScript mit Servern zu interagieren, hat sich im Laufe der Jahre weiterentwickelt. Mit einer wachsenden und aktiven Gemeinschaft von JavaScript-Entwicklern werden ständig Änderungen vorgenommen und neue Tools eingeführt, die den Prozess einfacher und leichter machen.

Die Methoden, die in diesem Tutorial besprochen werden, gelten nicht nur für entfernte Server — sie können auch für die Interaktion mit deinen eigenen Servern verwendet werden, wenn du Full-Stack-Webanwendungen erstellst. Sie funktionieren auch mit zahlreichen JavaScript-Bibliotheken und -Frameworks.

In diesem Tutorium haben wir dir gezeigt, wie du HTTP-Anfragen in JavaScript stellst. Anhand verschiedener Beispiele und Erklärungen haben wir dir gezeigt, wie du GET-, POST-, PUT/PATCH- und DELETE-Anfragen mit integrierten JavaScript-Methoden und Bibliotheken von Drittanbietern stellen kannst.

Das Erstellen und Bereitstellen einer Website kann eine mühsame Aufgabe sein, unabhängig von deinen Fähigkeiten. Kinsta macht dies mit DevKinsta einfach und mühelos. DevKinsta wird von über 25.000 Entwicklern, Webdesignern und Freiberuflern genutzt und bietet eine lokale Umgebung für die Entwicklung von WordPress-Themes, Plugins und mehr. Probier es aus!