Wie kann man mit fetch Query-Parameter in JavaScript verarbeiten?
- Was sind Query-Parameter in URLs?
- Verwendung von fetch in JavaScript
- Wie werden Query-Parameter mit fetch übergeben?
- Beispiel: Dynamisches Hinzufügen von Query-Parametern
- Zusammenfassung
Was sind Query-Parameter in URLs?
Query-Parameter sind zusätzliche Informationen, die an eine URL angehängt werden, um spezifische Daten oder Filter zu übermitteln.
Sie beginnen mit einem Fragezeichen (?) und bestehen aus Schlüssel-Wert-Paaren, die durch ein Gleichheitszeichen (=) verbunden sind.
Mehrere Parameter werden durch das kaufmännische Und (&) getrennt. Ein typisches Beispiel sieht so aus:
https://example.com/api/data?user=123&sort=asc. Diese Parameter können in Webanwendungen verwendet werden,
Verwendung von fetch in JavaScript
Die fetch-Funktion in JavaScript dient dazu, HTTP-Anfragen zu stellen und Antworten asynchron zu verarbeiten.
Sie wird häufig verwendet, um Daten von einem Server abzurufen, beispielsweise über eine API.
Mit fetch kann man eine URL anfragen und erhält eine Promise zurück, die die Antwort des Servers enthält.
Wie werden Query-Parameter mit fetch übergeben?
Um Query-Parameter mit fetch zu verwenden, werden sie direkt in die URL eingebettet.
Man baut zunächst die URL mit den entsprechenden Parametern als String zusammen, bevor man sie an fetch übergibt.
Zum Beispiel, wenn man Daten zu einem bestimmten Nutzer abrufen möchte, kann man eine URL wie https://api.example.com/users?id=42
Beispiel: Dynamisches Hinzufügen von Query-Parametern
In JavaScript ist es empfehlenswert, die Klasse URLSearchParams zu nutzen, um Query-Parameter korrekt zu erstellen und zu kodieren.
Man kann ein Objekt mit den gewünschten Parametern anlegen und damit eine Abfragezeichenkette generieren lassen.
Anschließend wird die Basis-URL mit dem eindeutigen Fragezeichen (?) und der Query-String zusammengesetzt und dann in fetch verwendet.
Zusammenfassung
Zusammenfassend bedeutet die Verwendung von Query-Parametern mit fetch, dass man die gewünschte URL inklusive Parameter als String übergibt.
Die Konstruktion dieser URL lässt sich bequem mit URLSearchParams realisieren, um Fehler und falsch kodierte Zeichen zu vermeiden.
Auf diese Weise kann man gezielt Daten von Servern anfragen, die auf bestimmte Parameter reagieren.