Heim > Web-Frontend > js-Tutorial > Callback-Funktionen anhand eines praktischen Beispiels verstehen

Callback-Funktionen anhand eines praktischen Beispiels verstehen

王林
Freigeben: 2024-07-19 12:21:28
Original
386 Leute haben es durchsucht

Understanding Callback Functions with a Practical Example

Stellen Sie sich vor, Sie sind Koch und haben einen Helfer. Ihre Aufgabe ist es, das Abendessen zu kochen, aber zuerst müssen Sie einige spezielle Zutaten aus dem Laden besorgen. Sie bitten Ihren Helfer, in den Laden zu gehen, und als er zurückkommt, sagt er Ihnen, dass er die Zutaten hat, damit Sie mit dem Kochen fortfahren können.

Was wir brauchen:

  • Node.js ist auf Ihrem Computer installiert.
  • Das Node-Fetch-Paket, das uns hilft, Daten aus dem Internet abzurufen.

Node.js und Node-Fetch installieren

Stellen Sie zunächst sicher, dass Node.js installiert ist. Wenn nicht, können Sie es von nodejs.org herunterladen und installieren.

Öffnen Sie dann Ihr Terminal und installieren Sie das Node-Fetch-Paket, indem Sie diesen Befehl ausführen: npm install node-fetch

Beispiel: Abrufen realer Daten mithilfe einer Rückruffunktion

Das folgende Beispiel zeigt, wie man mithilfe einer Rückruffunktion echte Daten von einer API abruft.

// Function that fetches data from the API and then calls the helper (callback)
const fetchData = async (callback) => {
  console.log('Fetching ingredients from the store...');
  try {
    const fetch = (await import("node-fetch")).default;
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log('Ingredients have been fetched.');
    callback(data); // Calling the helper (callback) with the fetched ingredients
  } catch (error) {
    console.error('Error fetching ingredients:', error);
  }
};

// Implementing and passing the helper (callback) to fetchData
fetchData((data) => {
  console.log('Processing the fetched ingredients:', data);
});
Nach dem Login kopieren

Code-Erklärung:

1/ Funktion fetchData:

  • Stellen Sie sich diese Funktion als Ihren Helfer vor, der in den Laden geht, um Zutaten zu holen.
  • Diese Funktion ist asynchron (asynchron), was bedeutet, dass sie auf Vorgänge wie das Abrufen von Daten warten kann.
  • Es ruft Daten von der URL https://jsonplaceholder.typicode.com/posts/1 ab, als würde man in den Laden gehen, um spezielle Zutaten zu kaufen.
  • Nachdem die Daten erfolgreich abgerufen wurden, werden sie in das JSON-Format konvertiert, als ob man mit den Zutaten aus dem Laden zurückkäme.
  • Schließlich ruft es den Helfer (Callback-Funktion) mit den abgerufenen Daten auf.

2/ Rückruffunktion:

  • Diese Funktion ist so, als würden Sie als Koch auf die Zutaten warten.
  • Sobald der Helfer die Zutaten bringt, kocht der Koch (Callback-Funktion) damit weiter.
  • In unserem Fall protokolliert diese Funktion die abgerufenen Daten in der Konsole.

Ausführen des Codes

Öffnen Sie das Terminal in VS Code (oder verwenden Sie die Befehlszeile) und navigieren Sie zu dem Verzeichnis, in dem sich Ihre fetchDataExample.js-Datei befindet. Führen Sie diese Datei dann mit Node.js mit dem Befehl aus: node fetchDataExample.js

Was Sie sehen sollten:

Wenn Sie diesen Code ausführen, sollten Sie etwa Folgendes sehen:

Fetching ingredients from the store...
Ingredients have been fetched.
Processing the fetched ingredients: { userId: 1, id: 1, title: '...', body: '...' }
Nach dem Login kopieren

Zusammenfassung:

  • Du bist der Koch, der zum Kochen Zutaten braucht.
  • Ihr Helfer (Rückruffunktion) geht zum Laden, um die Zutaten zu holen (Daten aus dem Internet mit Node-Fetch abrufen).
  • Der Helfer bringt die Zutaten und sagt es dir (ruft die Callback-Funktion mit den abgerufenen Daten auf).
  • Sie verwenden diese Zutaten und kochen weiter (Verarbeitung der abgerufenen Daten).

Das obige ist der detaillierte Inhalt vonCallback-Funktionen anhand eines praktischen Beispiels verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage