Das JavaScriptfetch()>Methode zum Abrufen von Ressourcen von einem Server. Es gibt ein Promise zurück und wird in das Response-Objekt aufgelöst, das die Antwort des Servers auf die Anfrage kapselt.fetch()>erleichtert das Durchführen von GET-Anfragen, die normalerweise zum Abrufen von Daten verwendet werden, und POST Anfragen, die zum Senden von Daten an Server verwendet werden.

Außerdem, fetch()> Integriert nahtlos Fortgeschrittene HTTP Funktionalitäten wie Cross-Origin-Ressourcenfreigabe (CORS) und andere Erweiterungen, die das Webentwicklungserlebnis durch verbesserte Sicherheit und Interoperabilität bereichern.

Hinweis: Die Fetch-API verfügt über die Methode fetch(), die zum Abrufen von Daten aus verschiedenen Quellen verwendet wird.

Syntax:

Was ist der Unterschied zwischen einem Megabyte und einem Gigabyte?

fetch('url') // api for the get request .then(response =>Response.json()) .then(data => console.log(data));>

Parameter:

• URL: Die URL, an die die Anfrage gestellt werden soll.
• Optionen: Es handelt sich um eine Reihe von Eigenschaften. Es ist ein Optional Parameter. Verfügbare Optionen sind:
  • Methode: Gibt die HTTP-Methode für die Anfrage an. (kann GET, POST, PUT oder DELETE sein)
  • Überschriften
  • Körper: Daten, die mit der Anfrage gesendet werden sollen.
  • Modus: Gibt den Anforderungsmodus an (z. B. kors, Nocors, Same-Origin usw.)
  • Referenzen : Gibt an, ob Benutzeranmeldeinformationen (Cookies, Authentifizierungsheader usw.) mit der Anfrage gesendet werden sollen

Beispiele für die JavaScript-fetch()-Methode

Schauen wir uns einige Beispiele der Fetch-Methode an. Diese Beispiele vermitteln Ihnen ein umfassendes Verständnis der Fetch-Methode in JavaScript.

1 . Anforderung mit Fetch abrufen

Dieses Beispiel zeigt, wie eine Get-Anfrage in der Abrufmethode erstellt wird.

Notiz: Ohne Optionen fungiert Fetch immer als Get-Anfrage.

// API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })>

Ausgabe:

Erläuterung:

1. Mit der JS-Funktion fetch() wird eine GET-Anfrage an die URL https://jsonplaceholder.typicode.com/todos/1 gesendet. Diese Funktion gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird, das die Antwort auf die Anfrage darstellt.
2. Die Methode then() ist mit dem Aufruf fetch() verkettet, um die Antwort asynchron zu verarbeiten. Innerhalb der an then() übergebenen Rückruffunktion wird die Methode res.json() aufgerufen, um den Antworttext als JSON zu analysieren. Diese Methode gibt auch ein Promise zurück, das in die analysierten JSON-Daten aufgelöst wird.
3. Eine weitere then()-Methode ist verkettet, um die analysierten JSON-Daten zu verarbeiten. Innerhalb seiner Rückruffunktion werden die analysierten JSON-Daten mit console.log() in der Konsole protokolliert.

2 . Verwenden von fetch zum Posten von JSON-Daten

In diesem Beispiel haben wir JSON-Daten mithilfe der fetch()-API in JavaScript hochgeladen. Sie können den Anforderungstext auf eine JSON-String-Version Ihrer Daten festlegen und die entsprechenden Header festlegen, um anzuzeigen, dass Sie JSON senden.

Beitragsanfragen können mit fetch gestellt werden, indem die unten angegebenen Optionen angegeben werden:

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>

Nachdem Sie die Syntax der Post-Anfrage überprüft haben, sehen Sie sich das folgende Beispiel an, das die Verwendung der Post-Anfrage in der Abrufmethode zeigt.

String-Split Java

// Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // Überprüfen Sie, ob die Anfrage erfolgreich war if (!response.ok) { throw new Error('Network Response was not ok');  } // Antwort als JSON analysieren return Response.json();  }) .then(data => { // Behandeln Sie die JSON-Daten console.log(data); }) .catch(error => { // Behandeln Sie alle Fehler, die während des Abrufs aufgetreten sind console.error('Fetch error: ', Fehler);  });>

Erläuterung:

• Wir definieren Ihre JSON-Daten.
• Wir richten Optionen für die Abrufanforderung ein, einschließlich der auf „POST“ eingestellten Methode, des auf „application/json“ eingestellten Content-Type-Headers und des auf die JSON-String-Version Ihrer Daten eingestellten Textkörpers.
• Wir stellen die Abrufanforderung mit den bereitgestellten Optionen mithilfe der Funktion fetch().
• Der Rest des Codes bleibt derselbe wie zuvor und behandelt die Antwort und alle Fehler, die während des Abrufs auftreten.

3. Eine Abrufanforderung abbrechen

Du kannst den ... benutzen AbortController Und AbortSignal-Schnittstelle um eine Abrufanforderung in JavaScript abzubrechen.

// Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ controller.abort(); // Abrufanforderung abbrechen console.log('Fetch request timed out'); }, 5000); // Abrufanforderung verarbeiten fetchPromise .then(response => { // Überprüfen Sie, ob die Anforderung erfolgreich war if (!response.ok) { throw new Error('Network Response was not ok'); } // Parse the Antwort als JSON return Response.json(); }) .then(data => { // Behandeln Sie die JSON-Daten console.log(data); }) .catch(error => { // Behandeln Sie alle Fehler, die während des aufgetreten sind fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Timeout löschen });>

Erläuterung:

• Wir erstellen eine neue AbortController-Instanz und erhalten deren Signal.
• Wir stellen die Abrufanfrage mit fetch() mit den bereitgestellten Optionen.
• Wir legen mit setTimeout() ein Timeout von 5 Sekunden fest, um die Abrufanforderung abzubrechen, wenn sie zu lange dauert.
• Innerhalb des Timeout-Callbacks rufen wir controller.abort() auf, um die Abrufanforderung abzubrechen.
• Wir bearbeiten die Abrufanfrage wie gewohnt, einschließlich der Analyse der Antwort und der Behandlung etwaiger Fehler.
• Schließlich löschen wir im Block „final()“ das Timeout mit „clearTimeout()“, um zu verhindern, dass das Timeout ausgelöst wird, wenn die Abrufanforderung vor Ablauf des Timeouts abgeschlossen wird.

Senden einer Anfrage einschließlich Anmeldeinformationen

Um eine Anfrage mit Anmeldeinformationen zu senden, z Kekse In einer Abrufanforderung können Sie die Eigenschaft „Anmeldeinformationen“ so festlegen, dass sie einbezogen wird.

fetch('https://example.com', { credentials: 'include', });>

Wenn Sie Anmeldeinformationen nur senden möchten, wenn die Anforderungs-URL denselben Ursprung hat wie das aufrufende Skript, fügen Sie Anmeldeinformationen hinzu: „same-origin“.

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>

Anwendungsfälle für die JavaScript-fetch()-Methode

Hier sind einige Anwendungsfälle der Fetch-Methode. Dies sind häufige Probleme, mit denen Anfängerentwickler bei der Arbeit mit fetch konfrontiert sind.

1. So verwenden Sie die JavaScript-Abruf-API zum Abrufen von Daten

Die JavaScript-Get-Anfrage wird verwendet, um Daten von einem Server abzurufen. Um die Fetch-API in JavaScript zum Abrufen von Daten von einem Server zu verwenden, können Sie eine GET-Anfrage an die gewünschte URL stellen und die Antwort verarbeiten.

2. Get- und Post-Methode mithilfe der Fetch-API

Eine fetch()-Methode kann mit jeder Art von Anfrage verwendet werden, z POST , ERHALTEN , SETZEN, Und LÖSCHEN , Die GET-Methode verwendet die Abruf-API

3. Unterschied zwischen Fetch und Axios beim Stellen von HTTP-Anfragen

Axios ist ein eigenständiges Paket eines Drittanbieters, das einfach installiert werden kann, und Fetch ist in die meisten modernen Browser integriert; Daher ist keine Installation erforderlich.

Unterstützte Browser:

JavaScript Fetch ist ein ECMAScript6 (ES6) Funktion und wird von fast allen modernen Browsern unterstützt wie:

• Google Chrome
• Rand
• Feuerfuchs
• Oper
• Safari