Programmation asynchrone en Javascript

JavaScript, étant un langage monothread, ne peut traiter qu'une seule tâche à la fois. Cela peut entraîner de longs temps d'attente pour les tâches complexes, car le script ne pourra pas exécuter d'autres tâches tant qu'elle n'est pas terminée. Pour résoudre ce problème, JavaScript propose une programmation asynchrone, qui permet au script de continuer à exécuter d'autres tâches en attendant la fin d'une tâche asynchrone. Dans ce blog, nous explorerons les bases de la programmation asynchrone en JavaScript et comment cela peut être réalisé grâce à l'utilisation de fonctions de rappel, de promesses et d'async/await.

Fonctions de rappel

Une fonction de rappel est une fonction qui est passée en argument à une autre fonction et est exécutée une fois la fonction principale terminée. Les rappels sont utilisés dans la programmation asynchrone pour attendre la fin d'une tâche avant d'exécuter l'étape suivante.

Par exemple, considérons le code suivant :

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

Dans cet exemple, la fonction slowTask prend un rappel comme argument. La fonction slowTask utilise setTimeout pour retarder l'exécution d'une tâche d'une seconde. La fonction runProgram appelle slowTask et passe une fonction de rappel en argument. La fonction runProgram enregistre également « Programme démarré » et « Programme terminé ». Lorsque la fonction slowTask est terminée, elle enregistre "Tâche lente terminée" et exécute la fonction de rappel, qui enregistre "Fonction de rappel exécutée".
Le résultat sera :

Program started.
Program ended.
Slow task completed.
Callback function executed.

Promesses

Les promesses sont une approche plus moderne de la programmation asynchrone en JavaScript. Une promesse représente le résultat d’une opération asynchrone et peut être dans l’un des trois états suivants : en attente, remplie ou rejetée. Une promesse peut être créée à l'aide du constructeur Promise et son état peut être déterminé à l'aide des méthodes then et catch.

Par exemple :

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

Dans cet exemple, slowTask est une promesse qui est résolue au bout d'une seconde avec le résultat "Tâche lente terminée.". La fonction runProgram appelle slowTask et utilise la méthode then pour enregistrer le résultat lorsque la promesse est remplie.

The output will be:
Program started.
Program ended.
Slow task completed.

Asynchrone/Attente

Async/await est le moyen le plus récent et le plus lisible de gérer les opérations asynchrones en JavaScript. Il permet aux développeurs d'écrire du code asynchrone qui ressemble à du code synchrone, ce qui le rend plus facile à comprendre et à maintenir. Le mot-clé async est utilisé pour déclarer une fonction asynchrone, et le mot-clé wait est utilisé pour attendre qu'une promesse soit résolue.

Voici un exemple pour démontrer l'utilisation de async/await en JavaScript :

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

Dans cet exemple, la fonction fetchData est déclarée asynchrone à l'aide du mot-clé async. La fonction utilise fetch pour récupérer les données d'une API, et wait est utilisée pour attendre la fin de l'opération de récupération. La réponse résolue est ensuite transformée en objet JSON à l'aide de response.json(). Le mot clé wait est utilisé pour attendre la fin de la transformation JSON et le résultat final est enregistré dans la console.

Il est important de noter que le code dans une fonction asynchrone sera exécuté de manière asynchrone, mais le code en dehors de la fonction sera toujours exécuté de manière synchrone. De plus, le mot-clé wait ne peut être utilisé que dans une fonction asynchrone.

En conclusion, la programmation asynchrone en JavaScript permet au script de continuer à exécuter d'autres tâches en attendant la fin d'une tâche asynchrone. Les fonctions de rappel, les promesses et async/wait sont trois façons de réaliser une programmation asynchrone en JavaScript. Les fonctions de rappel constituent le moyen le plus simple et le plus basique de gérer les opérations asynchrones, tandis que les promesses offrent une approche plus moderne et flexible. Async/await fournit le moyen le plus lisible de gérer les opérations asynchrones et constitue la méthode recommandée pour la programmation JavaScript moderne. Comprendre la programmation asynchrone en JavaScript est important pour créer des applications efficaces et réactives, et constitue une compétence indispensable pour tout développeur JavaScript.

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!