Wie füge ich Abfragezeichenfolgenparameter mit der Fetch-API an GET-Anfragen an?

Manipulation von Abfragezeichenfolgen in GET-Anfragen mit der Fetch-API

In der modernen Webentwicklung bietet die Fetch-API einen leistungsstarken Mechanismus zum Erstellen von HTTP-Anfragen. Ein häufiges Szenario besteht darin, GET-Anfragen mit Abfragezeichenfolgen zu senden. Die Semantik zum Hinzufügen von Abfragezeichenfolgenparametern unterscheidet sich jedoch von der beliebten jQuery-Methode $.ajax().

Frage:

Wie kann eine Abfragezeichenfolge zu a hinzugefügt werden? GET-Anfrage über die Fetch-API? Betrachten Sie beispielsweise die folgende URL:

http://myapi.com/orders?order_id=1

Antwort:

Die Fetch-API bietet zwei primäre Methoden zum Anhängen von Abfragezeichenfolgenparametern: URLSearchParams und URL.

Verwendung von URLSearchParams:

URLSearchParams ermöglicht die Manipulation von URL-Abfragezeichenfolgen. Es bietet eine intuitive Benutzeroberfläche zum Hinzufügen, Entfernen und Abfragen von Parametern. Um eine Abfragezeichenfolge zu erstellen, erstellen Sie eine URLSearchParams-Instanz, fügen Sie die gewünschten Parameter hinzu und konvertieren Sie sie in eine Zeichenfolge:

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

URL verwenden:

Alternativ die Die URL-Klasse kann verwendet werden, um URLs direkt zu bearbeiten. Es bietet Methoden zum Hinzufügen und Abrufen von Parametern:

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

Ausführliches Beispiel:

Stellen Sie sich das folgende Szenario vor: Abrufen von Kommentaren aus einem bestimmten Beitrag auf einer RESTful-API . Hier ist ein vollständiges Beispiel für den URLSearchParams-Ansatz:

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

Durch die Nutzung dieser Techniken können Entwickler effektiv Abfragezeichenfolgen zu GET-Anfragen hinzufügen, die mit der Fetch-API erstellt wurden, und so zusätzliche Parameter an serverseitige Endpunkte übergeben gefilterte Ergebnisse abrufen.

Das obige ist der detaillierte Inhalt vonWie füge ich Abfragezeichenfolgenparameter mit der Fetch-API an GET-Anfragen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!