JavaScript Async : qu'est-ce que c'est et comment l'utiliser

Lors de l'écriture d'applications JavaScript, vous avez peut-être rencontré des fonctions asynchrones, telles que la fonction fetch dans le navigateur ou la fonction readFile dans Nodejs.

Vous avez peut-être obtenu des résultats inattendus si vous avez utilisé l'une de ces fonctions comme vous le feriez normalement. C'est parce qu'il s'agit de fonctions asynchrones. Cet article explique ce que cela signifie et comment utiliser les fonctions asynchrones comme un pro.

Introduction to Synchronous Function

JavaScript est un langage monothread qui ne peut faire qu'une seule chose à la fois. Cela signifie que si le processeur rencontre une fonction qui prend beaucoup de temps, JavaScript attend que toute la fonction ait été exécutée avant de passer à d'autres parties du programme.

La plupart des fonctions sont entièrement exécutées par le processeur. Cela signifie que pendant l'exécution desdites fonctions, quel que soit le temps que cela prend, le processeur sera complètement occupé. Ces fonctions sont appelées fonctions synchrones. Un exemple de fonction synchrone a été défini ci-dessous :

function add(a, b) {
    for (let i = 0; i < 1000000; i ++) {
        // Do nothing
    }
    return a + b;
}

// Calling the function will take a long time
sum = add(10, 5);

// However, the processor cannot move to the 
console.log(sum);

Cette fonction effectue une grande boucle dont l'exécution prend beaucoup de temps avant de retourner la somme de ses deux arguments.

Après avoir défini la fonction, nous l'avons appelée et stocké son résultat dans la variable sum. Ensuite, nous avons enregistré la valeur de la variable somme. Même si l'exécution de la fonction d'addition prend un certain temps, le processeur ne peut pas enregistrer la somme tant que l'exécution n'est pas terminée.

La grande majorité des fonctions que vous rencontrerez se comporteront de manière prévisible comme celle ci-dessus. Cependant, certaines fonctions sont asynchrones et ne se comportent pas comme des fonctions normales.

Introduction to Asynchronous Function

Les fonctions asynchrones effectuent la majorité de leur travail en dehors du processeur. Cela signifie que même si l'exécution de la fonction peut prendre un certain temps, le processeur sera inoccupé et libre de faire plus de travail.

Voici un exemple d'une telle fonction :

fetch('https://jsonplaceholder.typicode.com/users/1');

Pour améliorer l'efficacité, JavaScript permet au processeur de passer à d'autres tâches nécessitant le CPU avant même que l'exécution de la fonction asynchrone ne soit terminée.

Étant donné que le processeur a évolué avant que l'exécution de la fonction asynchrone ne soit terminée, son résultat ne sera pas immédiatement disponible. Ce sera en attente. Si le processeur essayait d'exécuter d'autres parties du programme qui dépendaient du résultat en attente, nous aurions des erreurs.

Par conséquent, le processeur ne doit exécuter que les parties du programme qui ne dépendent pas du résultat en attente. Pour ce faire, le JavaScript moderne utilise des promesses.

What is a Promise in JavaScript?

En JavaScript, une promesse est une valeur temporaire renvoyée par une fonction asynchrone. Les promesses sont l'épine dorsale de la programmation asynchrone moderne en JavaScript.

Après la création d'une promesse, l'une des deux choses se produit. Il se résout soit lorsque la valeur de retour de la fonction asynchrone est produite avec succès, soit la rejette en cas d'erreur. Ce sont des événements dans le cycle de vie d'une promesse. Par conséquent, nous pouvons attacher des gestionnaires d'événements à la promesse à appeler lorsqu'elle est résolue ou rejetée.

Tout le code qui nécessite la valeur finale d'une fonction asynchrone peut être attaché au gestionnaire d'événements de la promesse pour sa résolution. Tout le code qui gère l'erreur d'une promesse rejetée sera également attaché à son gestionnaire d'événements correspondant.

Voici un exemple où nous lisons les données d'un fichier dans Nodejs.

const fs = require('fs/promises');

fileReadPromise = fs.readFile('./hello.txt', 'utf-8');

fileReadPromise.then((data) => console.log(data));

fileReadPromise.catch((error) => console.log(error));

Dans la première ligne, nous importons le fs/promises module.

Dans la deuxième ligne, nous appelons la fonction readFile, en passant le nom et l'encodage du fichier dont nous voulons lire le contenu. Cette fonction est asynchrone ; par conséquent, il renvoie une promesse. Nous stockons la promesse dans la variable fileReadPromise.

Dans la troisième ligne, nous avons attaché un écouteur d'événement pour le moment où la promesse se résout. Nous l'avons fait en appelant le then méthode sur l'objet promesse. En guise d'argument à notre appel au then méthode, nous avons transmis la fonction à exécuter si et quand la promesse se résout.

Dans la quatrième ligne, nous avons attaché un écouteur pour le cas où la promesse est rejetée. Cela se fait en appelant la méthode catch et en passant le gestionnaire d'événements d'erreur en tant qu'argument.

Une autre approche consiste à utiliser les mots-clés async et await. Nous aborderons cette approche ensuite.

Async and Await Explained

Les mots-clés Async et Await peuvent être utilisés pour écrire du Javascript asynchrone d'une manière qui a une meilleure apparence syntaxique. Dans cette section, je vais vous expliquer comment utiliser les mots-clés et quel effet ils ont sur votre code.

Le mot clé await est utilisé pour suspendre l'exécution d'une fonction en attendant qu'une fonction asynchrone se termine. Voici un exemple :

const fs = require('fs/promises');

function readData() {
	const data = await fs.readFile('./hello.txt', 'utf-8');

    // This line will not be executed until the data becomes available
	console.log(data);
}

readData()

Nous avons utilisé le mot clé await lors d'un appel à readFile. Cela a demandé au processeur d'attendre que le fichier ait été lu avant que la ligne suivante (la console.log) puisse être exécutée. Cela permet de garantir que le code qui dépend du résultat d'une fonction asynchrone ne sera pas exécuté tant que le résultat ne sera pas disponible.

Si vous essayez d'exécuter le code ci-dessus, vous rencontrerez une erreur. En effet, await ne peut être utilisé qu'à l'intérieur d'une fonction asynchrone. Pour déclarer une fonction comme asynchrone, vous utilisez la async mot-clé avant la déclaration de la fonction comme ceci :

const fs = require('fs/promises');

async function readData() {
	const data = await fs.readFile('./hello.txt', 'utf-8');

    // This line will not be executed until the data becomes available
	console.log(data);
}

// Calling the function so it runs
readData()

// Code at this point will run while waiting for the readData function to complete
console.log('Waiting for the data to complete')

En exécutant cet extrait de code, vous verrez que JavaScript exécute le fichier console.log externe en attendant que les données lues dans le fichier texte soient disponibles. Une fois disponible, le fichier console.log à l'intérieur de readData est exécuté.

La gestion des erreurs lors de l'utilisation des mots-clés async et await est généralement effectuée à l'aide de essayer / attraper blocs. Il est également important de savoir comment boucle avec du code asynchrone.

Async et await sont disponibles en JavaScript moderne. Traditionnellement, le code asynchrone était écrit à l'aide de rappels.

Introduction to Callbacks

Un callback est une fonction qui sera appelée une fois le résultat disponible. Tout le code qui nécessite la valeur de retour sera placé à l'intérieur du rappel. Tout le reste en dehors du rappel ne dépend pas du résultat et est donc libre d'être exécuté.

Voici un exemple qui lit un fichier dans Nodejs.

const fs = require("fs");

fs.readFile("./hello.txt", "utf-8", (err, data) => {

	// In this callback, we put all code that requires 
	if (err) console.log(err);
	else console.log(data);
});

// In this part here we can perform all the tasks that do not require the result
console.log("Hello from the program")

Dans la première ligne, nous avons importé le fs module. Ensuite, nous avons appelé le readFile fonction de la fs module. la readFile La fonction lira le texte d'un fichier que nous spécifions. Le premier argument est de quel fichier il s'agit, et le second spécifie le format de fichier.

Les readFile La fonction lit le texte des fichiers de manière asynchrone. Pour ce faire, il prend une fonction en argument. Cet argument de fonction est une fonction de rappel et sera appelé une fois que les données auront été lues.

Le premier argument passé lorsque la fonction de rappel est appelée est une erreur qui aura une valeur si une erreur survient pendant l'exécution de la fonction. Si aucune erreur n'est rencontrée, elle sera indéfinie.

Le deuxième argument passé au rappel est les données lues à partir du fichier. Le code à l'intérieur de cette fonction accédera aux données du fichier. Le code en dehors de cette fonction ne nécessite pas de données du fichier ; peut donc être exécuté en attendant les données du fichier.

L'exécution du code ci-dessus produirait le résultat suivant :

Key JavaScript Features

Certaines fonctionnalités et caractéristiques clés influencent le fonctionnement de JavaScript asynchrone. Ils sont bien expliqués dans la vidéo ci-dessous :

J'ai brièvement décrit les deux caractéristiques importantes ci-dessous.

# 1. Fil unique

Contrairement à d'autres langages qui permettent au programmeur d'utiliser plusieurs threads, JavaScript ne vous permet d'utiliser qu'un seul thread. Un thread est une séquence d'instructions qui dépendent logiquement les unes des autres. Plusieurs threads permettent au programme d'exécuter un thread différent lorsque des opérations bloquantes sont rencontrées.

Cependant, plusieurs threads ajoutent de la complexité et compliquent la compréhension des programmes qui les utilisent. Cela rend plus probable que des bogues soient introduits dans le code, et il serait difficile de déboguer le code. JavaScript a été rendu monothread pour plus de simplicité. En tant que langage à thread unique, il repose sur la gestion des événements pour gérer efficacement les opérations de blocage.

# 2. Événementiel

JavaScript est également piloté par les événements. Cela signifie que certains événements se produisent pendant le cycle de vie d'un programme JavaScript. En tant que programmeur, vous pouvez attacher des fonctions à ces événements, et chaque fois que l'événement se produit, la fonction attachée sera appelée et exécutée.

Certains événements peuvent résulter de la disponibilité du résultat d'une opération de blocage. Dans ce cas, la fonction associée est alors appelée avec le résultat.

Things to Consider When Writing Asynchronous JavaScript

Dans cette dernière section, je mentionnerai quelques éléments à prendre en compte lors de l'écriture de JavaScript asynchrone. Cela inclura la prise en charge du navigateur, les meilleures pratiques et l'importance.

Support du navigateur

Il s'agit d'un tableau montrant la prise en charge des promesses dans différents navigateurs.

Il s'agit d'un tableau montrant la prise en charge des mots-clés asynchrones dans différents navigateurs.

Les meilleurs pratiques

• Optez toujours pour async/wait, car cela vous aide à écrire un code plus propre et facile à penser.
• Gérer les erreurs dans les blocs try/catch.
• N'utilisez le mot-clé async que lorsqu'il est nécessaire d'attendre le résultat d'une fonction.

Importance du code asynchrone

Le code asynchrone vous permet d'écrire des programmes plus efficaces qui n'utilisent qu'un seul thread. Ceci est important car JavaScript est utilisé pour créer des sites Web qui effectuent de nombreuses opérations asynchrones, telles que des requêtes réseau et la lecture ou l'écriture de fichiers sur le disque. Cette efficacité a permis aux runtimes comme NodeJS de gagner en popularité en tant que runtime préféré pour les serveurs d'applications.

Mot de la fin

Cet article a été long, mais dans celui-ci, nous avons pu expliquer en quoi les fonctions asynchrones diffèrent des fonctions synchrones régulières. Nous avons également expliqué comment utiliser du code asynchrone en utilisant uniquement des promesses, des mots-clés async/wait et des rappels.

De plus, nous avons couvert les fonctionnalités clés de JavaScript. Dans la dernière section, nous avons conclu en couvrant la prise en charge des navigateurs et les meilleures pratiques.

Ensuite, consultez Questions d'entretien fréquemment posées par Node.js.