Maison > interface Web > js tutoriel > le corps du texte

Comprendre les fonctions de rappel avec un exemple pratique

王林
Libérer: 2024-07-19 12:21:28
original
353 Les gens l'ont consulté

Understanding Callback Functions with a Practical Example

Imaginez que vous êtes un chef et que vous avez une aide. Votre travail consiste à préparer le dîner, mais vous devez d'abord vous procurer des ingrédients spéciaux au magasin. Vous demandez à votre assistant d'aller au magasin, et à son retour, il vous dit qu'il a les ingrédients pour que vous puissiez continuer à cuisiner.

Ce dont nous avons besoin :

  • Node.js installé sur votre ordinateur.
  • Le package node-fetch, qui nous aide à récupérer des données sur Internet.

Installation de Node.js et node-fetch

Tout d’abord, assurez-vous que Node.js est installé. Sinon, vous pouvez le télécharger et l'installer depuis nodejs.org.

Ensuite, ouvrez votre terminal et installez le package node-fetch en exécutant cette commande : npm install node-fetch

Exemple : récupération de données réelles à l'aide d'une fonction de rappel

L'exemple suivant montre comment récupérer des données réelles à partir d'une API à l'aide d'une fonction de rappel.

// 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);
});
Copier après la connexion

Explication du code :

1/ Fonction fetchData :

  • Considérez cette fonction comme votre assistant qui va au magasin chercher des ingrédients.
  • Cette fonction est asynchrone (async), ce qui signifie qu'elle peut attendre des opérations telles que la récupération de données.
  • Il récupère les données de l'URL https://jsonplaceholder.typicode.com/posts/1, comme aller au magasin pour obtenir des ingrédients spéciaux.
  • Après avoir récupéré avec succès les données, il les convertit au format JSON, comme si vous reveniez du magasin avec les ingrédients.
  • Enfin, il appelle l'assistant (fonction de rappel) avec les données récupérées.

2/ Fonction de rappel :

  • Cette fonction, c'est comme vous, le chef, qui attend les ingrédients.
  • Une fois que l'assistant apporte les ingrédients, le chef (fonction rappel) les utilise pour continuer la cuisson.
  • Dans notre cas, cette fonction enregistre les données récupérées sur la console.

Exécuter le code

Ouvrez le terminal dans VS Code (ou utilisez la ligne de commande) et accédez au répertoire où se trouve votre fichier fetchDataExample.js. Exécutez ensuite ce fichier en utilisant Node.js avec la commande : node fetchDataExample.js

Ce que vous devriez voir :

Lorsque vous exécutez ce code, vous devriez voir quelque chose comme ceci :

Fetching ingredients from the store...
Ingredients have been fetched.
Processing the fetched ingredients: { userId: 1, id: 1, title: '...', body: '...' }
Copier après la connexion

Résumé:

  • Vous êtes le chef qui a besoin d'ingrédients pour cuisiner.
  • Votre assistant (fonction de rappel) se rend au magasin pour récupérer les ingrédients (récupération de données sur Internet à l'aide de node-fetch).
  • L'assistant apporte les ingrédients et vous le dit (appelle la fonction de rappel avec les données récupérées).
  • Vous utilisez ces ingrédients et continuez la cuisson (en traitant les données récupérées).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal