Verwendung von Fetch zum Tätigen von AJAX-Aufrufen in JavaScript

Ich werde in dieser Reihe regelmäßig mundgerechte Erkenntnisse über JavaScript veröffentlichen. Wir werden JS-Grundlagen, Browser, DOM, Systemdesign, Domänenarchitektur und Frameworks behandeln.

Fetch ist eine Schnittstelle zum Erstellen einer AJAX-Anforderung in JavaScript. Es wird von modernen Browsern weitgehend implementiert und zum Aufrufen einer API verwendet.

const promise = fetch(url, [options]) 

Wenn Sie fetch aufrufen, wird ein Versprechen mit einem Response-Objekt zurückgegeben. Das Versprechen wird abgelehnt, wenn ein Netzwerkfehler vorliegt, und es wird behoben, wenn keine Verbindung zum Server hergestellt wird und der Server einen Statuscode beantwortet hat. Dieser Statuscode kann 200s, 400s oder 500s sein.

Eine Beispiel-FETCH-Anfrage -

 fetch(url) .then(response => response.json()) .catch(err => console.log(err)) 

Die Anforderung wird standardmäßig als GET gesendet. Um einen POST / PATCH / DELETE / PUT zu senden, können Sie die method-Eigenschaft als Teil des optionsParameters verwenden. Einige andere mögliche Werte optionskönnen annehmen -

  • method: wie GET, POST, PATCH
  • headers: Header-Objekt
  • mode: Wie cors, no-cors,same-origin
  • cache: Cache-Modus für Anfrage
  • credentials
  • body

Die vollständige Liste der verfügbaren Optionen finden Sie hier

Anwendungsbeispiel:

Dieses Beispiel zeigt die Verwendung von fetch zum Aufrufen einer API und zum Abrufen einer Liste von Git-Repositorys.

const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) 

Um eine POST-Anforderung zu senden, können Sie den Methodenparameter wie folgt mit der Syntax async / await verwenden.

const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json(); 

Interessiert an mehr JSBytes? Melden Sie sich für den Newsletter an