Hinzufügen von Abfragezeichenfolgen in Fetch-GET-Anfragen

Beim Erkunden der Abfragezeichenfolgenfunktionen der Fetch-API möchte ein Entwickler Parameter an GET-Anfragen übergeben, indem er eine Methode verwendet, die dem $ von jQuery ähnelt .ajax().

Lösung

Die neue Fetch-API verwendet URLSearchParams, um Abfragen zu bewältigen String-Addition. Dieses Objekt bietet eine praktische Möglichkeit zum Erstellen und Ändern von Abfragezeichenfolgenparametern.

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

Die Methode URLSearchParams.toString() kodiert das Parameterobjekt in eine entsprechend formatierte Abfragezeichenfolge.

Alternativ können Sie den .toString()-Aufruf weglassen, z JavaScript wandelt Nicht-String-Objekte automatisch in Strings um, wenn es mit Strings verkettet wird. Beachten Sie, dass dieser Ansatz ein tieferes Verständnis von JavaScript erfordert.

Vollständiges Beispiel

Hier ist ein umfassendes Beispiel mit Abfrageparametern:

async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?'  
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: '   url);
  console.log(result);
}

doAsyncTask();