Technologie

Wie kann man mit Fetch API Query-Parameter übergeben und auslesen?

Melden
  1. Was sind Query-Parameter?
  2. Wie werden Query-Parameter mit fetch übergeben?
  3. Wie kann man Query-Parameter aus einer URL auslesen?
  4. Zusammenfassung

Wenn man mit der Fetch API in JavaScript arbeitet, stellt sich häufig die Frage, wie man Query-Parameter korrekt übermitteln und aus der URL auslesen kann. Query-Parameter sind Teil der URL und werden verwendet, um zusätzliche Informationen an einen Server zu senden, meist in Form von Schlüssel-Wert-Paaren, die an die URL angehängt werden.

Was sind Query-Parameter?

Query-Parameter befinden sich nach dem Fragezeichen in einer URL und dienen dazu, Daten an den Server zu übertragen. Ein Beispiel für eine URL mit Query-Parametern ist:

https://example.com/api?name=Max&age=25

Hier sind name=Max und age=25 zwei Query-Parameter. Diese werden häufig verwendet, um Filterkriterien, Suchbegriffe oder andere relevante Informationen an die API zu übergeben.

Wie werden Query-Parameter mit fetch übergeben?

Um bei einem fetch-Aufruf Query-Parameter zu übergeben, fügt man sie einfach der URL hinzu, bevor der fetch-Aufruf stattfindet. Das kann man entweder manuell per String-Verkettung machen oder komfortabler mit dem Objekt URLSearchParams.

Ein Beispiel für den manuellen Weg:

fetch(https://example.com/api?name=Max&age=25)

Besser lesbar und sicherer ist der Ansatz mit URLSearchParams:

Mit URLSearchParams erstellt man die Query-Parameter als Objekt und hängt sie an die URL an:

const params = new URLSearchParams({ name: Max, age: 25 });fetch(`https://example.com/api?${params.toString()}`) .then(response => response.json()) .then(data => console.log(data));

Dieses Vorgehen sorgt automatisch dafür, dass Sonderzeichen richtig kodiert werden, was manuelle String-Manipulationen fehleranfällig machen kann.

Wie kann man Query-Parameter aus einer URL auslesen?

Wenn man beispielsweise auf der Client-Seite die aktuellen Query-Parameter aus der URL auslesen möchte, nutzt man das Objekt URLSearchParams ebenfalls vom Fensterstandort:

const queryString = window.location.search;const params = new URLSearchParams(queryString);const name = params.get(name);const age = params.get(age);console.log(name, age);

So liest man die einzelnen Parameter aus und kann sie im weiteren Code verwenden.

Zusammenfassung

Query-Parameter sind ein wichtiger Bestandteil der URL, um Daten an APIs zu übertragen. Mit der Fetch API fügt man sie einfach an die URL an, idealerweise durch Nutzung von URLSearchParams, um Fehler und Kodierungsprobleme zu vermeiden. Auch das Auslesen von Query-Parametern ist mit URLSearchParams einfach und effizient möglich.

0

Kommentare