JavaScript est un langage monothread, ce qui signifie qu'il ne peut faire qu'une seule chose à la fois. Cependant, les applications Web doivent souvent effectuer des tâches telles que récupérer des données sur un serveur, ce qui peut prendre un certain temps. Si JavaScript devait attendre la fin de chaque tâche avant de passer à autre chose, votre application Web serait lente et ne répondrait plus. C'est là qu'intervient le JavaScript asynchrone (asynchrone).

Qu’est-ce que JavaScript asynchrone ?

JavaScript asynchrone permet à votre code de démarrer une tâche, puis de passer à d'autres tâches en attendant que cette tâche soit terminée. Une fois la tâche terminée, votre code peut revenir et gérer le résultat. Cela permet à votre application de rester rapide et réactive.

Concepts clés en JavaScript asynchrone

1. Synchrone ou asynchrone :

   • Synchronous : chaque tâche attend la fin de la précédente avant de démarrer. Par exemple:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   Dans le code synchrone, le message "Fin" ne sera enregistré qu'une fois someFunction() terminé, ce qui peut ralentir les choses.

• Asynchrone : les tâches peuvent démarrer et se terminer indépendamment, afin que votre code ne reste pas bloqué en attente. Par exemple:
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  Ici, le message "Fin" sera enregistré après 2 secondes, mais en attendant, votre code peut continuer à faire autre chose.

1. Rappels :

   • Un callback est une fonction passée en argument à une autre fonction, qui sera exécutée une fois la tâche terminée.
   • Exemple:

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• Les rappels étaient le moyen original de gérer les tâches asynchrones, mais ils peuvent devenir compliqués, surtout si vous avez de nombreuses tâches à gérer (c'est ce qu'on appelle « l'enfer des rappels »).

1. Promesses :

   • Une promesse est un objet qui représente l'achèvement (ou l'échec) éventuel d'une tâche asynchrone et la valeur qui en résulte.
   • Exemple:

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• resolve : si la tâche se termine avec succès, la promesse est "résolue" avec une valeur.
• reject : si la tâche échoue, la promesse est "rejetée" avec un message d'erreur.
• .then() : gère la valeur renvoyée si la promesse est résolue.
• .catch() : gère l'erreur si la promesse est rejetée.

1. Async/Attendre :

   • async et await sont des fonctionnalités JavaScript modernes qui rendent le travail avec les promesses plus facile et plus lisible.
   • async : Une fonction déclarée avec async retournera toujours une promesse.
   • attendre : suspend l'exécution d'une fonction asynchrone jusqu'à ce que la promesse soit résolue.
   • Exemple:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• Dans cet exemple, le mot-clé wait est utilisé pour attendre la fin d'une tâche AsyncTask avant de passer à la ligne de code suivante. Si la tâche échoue, l'erreur est détectée et gérée dans le bloc catch.

Résumé

• JavaScript asynchrone permet d'éviter que votre application ne devienne lente et ne réponde plus en permettant à votre code de gérer plusieurs tâches en même temps.
• Les rappels sont des fonctions qui s'exécutent une fois qu'une tâche asynchrone est terminée, mais qui peuvent devenir compliquées avec des tâches complexes.
• Les promesses offrent un moyen plus propre de gérer les opérations asynchrones, représentant les tâches qui seront accomplies dans le futur.
• Async/Await est une syntaxe moderne qui rend le travail avec les promesses plus simple et plus lisible.

Comprendre JavaScript asynchrone est essentiel pour créer des applications Web réactives et efficaces, car il permet à votre code d'effectuer des tâches sans rester bloqué en attendant la fin d'opérations lentes.