ホームページ  >  記事  >  ウェブフロントエンド  >  実用的な例でコールバック関数を理解する

実用的な例でコールバック関数を理解する

王林
王林オリジナル
2024-07-19 12:21:28321ブラウズ

Understanding Callback Functions with a Practical Example

あなたはシェフで、ヘルパーがいると想像してください。あなたの仕事は夕食を作ることですが、その前に店から特別な食材を入手する必要があります。あなたはヘルパーに店に行くように頼み、彼らが戻ってきたら、材料があるので料理を続けられると教えてくれます。

必要なもの:

  • Node.js がコンピューターにインストールされています。
  • インターネットからデータを取得するのに役立つノードフェッチ パッケージ。

Node.js とノードフェッチのインストール

まず、Node.js がインストールされていることを確認してください。そうでない場合は、nodejs.org からダウンロードしてインストールできます。

次に、ターミナルを開き、次のコマンドを実行してノードフェッチ パッケージをインストールします: npm install node-fetch

例: コールバック関数を使用した実際のデータのフェッチ

次の例は、コールバック関数を使用して API から実際のデータをフェッチする方法を示しています。

// 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);
});

コードの説明:

1/ 関数 fetchData:

  • この機能は、食材を買いに店に行くヘルパーのようなものだと考えてください。
  • この関数は非同期 (async) です。つまり、データのフェッチなどの操作を待機できます。
  • 特別な食材を買いに店に行くのと同様に、URL https://jsonplaceholder.typicode.com/posts/1 からデータを取得します。
  • データの取得に成功すると、食材を持って店から戻ってきたときのように、データを JSON 形式に変換します。
  • 最後に、取得したデータを使用してヘルパー (コールバック関数) を呼び出します。

2/ コールバック関数:

  • この機能は、シェフであるあなたが材料を待っているようなものです。
  • ヘルパーが食材を持ってくると、シェフ (コールバック関数) がそれらを使用して調理を続けます。
  • この例では、この関数は取得したデータをコンソールに記録します。

コードの実行

VS Code でターミナルを開き (またはコマンド ラインを使用)、fetchDataExample.js ファイルが存在するディレクトリに移動します。次に、Node.js を使用してこのファイルを実行し、次のコマンドを実行します:node fetchDataExample.js

見るべきもの:

このコードを実行すると、次のような内容が表示されるはずです。

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

まとめ:

  • あなたは料理に材料が必要なシェフです。
  • ヘルパー (コールバック関数) がストアに行き、材料を取得します (ノードフェッチを使用してインターネットからデータを取得します)。
  • ヘルパーは材料を持ってきて教えてくれます (取得したデータでコールバック関数を呼び出します)。
  • これらの材料を使用して、調理 (取得したデータの処理) を続けます。

以上が実用的な例でコールバック関数を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。