JavaScript/WindowOrWorkerGlobalScope/fetch/Daten senden

Um mit Hilfe von fetch() Daten zu senden, muss man eine geeignete HTTP-Methode verwenden. Es gibt zwei davon: POST und PUT, wobei PUT auf dem Webserver gewisser Vorbereitungen bedarf, wenn man mit PHP darauf reagieren will. Diese Vorbereitungen sind je nach Webserver unterschiedlich und können hier nicht im Detail diskutiert werden.

POST ist vor allem für Formulardaten gedacht. Für das Fetch-API bedeutet das, dass man ein FormData oder ein URLSearchParams-Objekt als Datencontainer verwendet. Über FormData lassen sich auch Dateien hochladen, und fetch setzt dann automatisch den multipart/formdata Content-Type und berechnet auch einen passenden boundary-Wert zum Trennen der Parts im Multipart-Format. Serverseitig kommt PHP mit solchen Requests automatisch zurecht und stellt die Daten in $_POST und $_FILES bereit.

Wenn man Daten mit dem PUT-Verb oder per POST in anderen Formaten übertragen möchte, sieht die Sache anders aus. In diesem Fall muss man den Content-Type selbst setzen (zum Beispiel "application/json") und die Daten in PHP aus dem stdin-Stream selbst einlesen. Der im Anhang gelistete Link zur PUT-Unterstützung in PHP zeigt, wie das geht.

Schritt 1: Senden des HTTP-Requests

Das ist für POST etwas aufwändiger als für GET. Wir benötigen hier zwingend den zweiten Parameter der fetch()-Funktion, mit dem sich ein RequestInit-Objekt übergeben lässt. Für RequestInit gibt es keinen Konstruktor, es ist lediglich ein Satz von Eigenschaften, die in der fetch-Spezifikation festgelegt sind.

Wichtig sind hier vor allem die folgenden Eigenschaften:

method

Die anzuwendende HTTP-Methode.

body

Der zu sendende Inhalt. Außer einem FormData und URLSearchParams-Objekt werden noch weitere Objekttypen unterstützt:

* Strings

* ArrayBuffer

* Blob

* DataView

* File

* TypedArray

* ReadableStream

headers

Wenn du Header übertragen musst, hinterlegst Du hier entweder ein Headers-Objekt oder ein Objektliteral, in dem die Eigenschaftsnamen die Headernamen darstellen. Die Eigenschaftswerte werden als Inhalt des Headers übertragen.

Für unser Beispiel wollen wir bei dem Wetterstationen-Netz bleiben. Eine Wetterstation muss gelegentlich kalibriert werden. Dazu braucht sie Daten, und die schicken wir ihr über einen POST auf calibrate.php. Wie diese Daten genau aussehen und was calibrate.php tut, kann uns für das Verständnis von fetch vollständig gleichgültig sein.

Senden eines Objekts an ein Server-API

async function calibrateStation(station, data) {
   const url = new URL("https://weather.example.com/calibrate.php");
   url.searchParams.set("station", station);

   const calibrationBody = JSON.stringify(data);
   const requestInit = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: calibrationBody;
   };
   const response = await fetch(url, requestInit);
   if (response.ok) 
      return response.json();
   else
      throw new Error(`Kalibrierung von Station ${station} gescheitert, ` +
                      `HTTP-Status ${response.status}`);
}

Schritt 2: Empfangen der Antwort

Dieser Teil ist identisch zum GET-Request.

Weblinks

• Daten empfangen
• Fetch-API
• Header