Was nimmt die fetch-Methode an?

Die Methode fetch akzeptiert ein obligatorisches Argument — den Pfad zur Anfrage (RequestInfo oder URL) — und ein optionales Argument — ein Konfigurationsobjekt (RequestInit).

Obligatorisches Argument (input) :

• String: URL der Ressource.
• Request-Objekt: Instanz der Klasse Request, die eine flexiblere Konfiguration der Anfrage ermöglicht (Header, Methode usw.).

Optionales Argument (init) : Ein Objekt mit Feldern, die die Anfragekonfiguration beschreiben. Einige häufig verwendete Felder:

• method: HTTP-Methode der Anfrage (GET, POST, PUT, DELETE, OPTIONS usw.).
• headers: Anfrage-Header. Kann ein Schlüssel-Wert-Objekt oder eine Instanz der Klasse Headers sein.
• body: Anfragetext (für Methoden außer GET oder HEAD). Kann eine Zeichenkette, ArrayBuffer, TypedArray, DataView, Blob, FormData, URLSearchParams oder ReadableStream sein.
• mode: Anfragemodus (cors, no-cors, same-origin, navigate).
• credentials: Einstellung zum Senden von Anmeldeinformationen (omit, same-origin, include).
• cache: Cache-Einstellung (default, no-store, reload, no-cache, force-cache, only-if-cached).
• redirect: Wie mit Weiterleitungen umgegangen wird (follow, error, manual).
• referrer: Wert für den Referer-Header.
• referrerPolicy: Richtlinie für die Übertragung des Referer-Headers.
• integrity: Wert für den Integrity-Header. Wird für Subresource Integrity verwendet.
• keepalive: Boolescher Wert, der angibt, ob die Anfrage nach dem Schließen der Seite aktiv bleiben soll (z.B. für Analysen oder Berichte).
• signal: Instanz von AbortSignal zum Abbrechen der Anfrage.
• window: Das Window-Objekt, mit dem die Anfrage assoziiert ist (standardmäßig das aktuelle Fenster).

Beispiel:

// GET-Anfrage
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fehler:', error));

// POST-Anfrage mit Body und Headern
fetch('/api/products', {
  method: 'POST', // HTTP-Methode
  headers: {
    'Content-Type': 'application/json', // Datentyp
    'Authorization': 'Bearer your_token' // Beispiel für Autorisierungsheader
  },
  body: JSON.stringify({ name: 'Neues Produkt', price: 100 }) // Anfragetext
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP-Fehler! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('Erfolg:', data))
  .catch(error => console.error('Fehler:', error));