Apprenez à créer des programmes asynchrones avec JavaScript

La programmation asynchrone est un incontournable du développement logiciel. Il est difficile de croire que ce concept de programmation n'existe que depuis le XXIe siècle. Le langage de programmation F # a été le premier parmi ses pairs à introduire la programmation asynchrone, en 2007.

D'autres langages tels que C#, Python, JavaScript et C++ ont progressivement ajouté la prise en charge de la programmation asynchrone. La grande question est la suivante: quelle valeur la programmation asynchrone ajoute-t-elle à vos applications ?

Cet article répond à cela et à d'autres questions, vous découvrirez donc comment utiliser la programmation asynchrone.

Qu'est-ce que la programmation synchrone ?

La programmation synchrone fait référence à un programme dans sa forme la plus basique. Ce modèle de programmation traite les lignes de code d'un programme ou d'un script de manière séquentielle. Il commence toujours à partir de la première ligne de code d'un programme. Ensuite, il attend que chaque ligne de code ait terminé son exécution avant de passer à la suivante.

Le modèle synchrone comprend également du code conditionnel, tel que si et tandis que déclarations. Bien que seul une partie du code d'une instruction conditionnelle s'exécute, le programme s'exécute toujours de manière séquentielle.

Exemple de programme synchrone

const CodeSync = () => {
 console.log("Ceci est la première ligne du programme")
 console.log("Ceci est la deuxième ligne du programme")
 console.log("Ceci est la dernière ligne du programme")
}
CodeSync();

L'exécution du programme JavaScript ci-dessus produira le résultat suivant dans la console :

Ceci est la première ligne du programme
Ceci est la deuxième ligne du programme
Ceci est la dernière ligne du programme

La sortie ci-dessus est exactement ce à quoi vous devez vous attendre. Le programme commence par le haut et attend qu'une ligne de code se termine avant de passer à la suivante.

Qu'est-ce que la programmation asynchrone ?

La programmation asynchrone est l'opposé de la programmation synchrone. Le modèle de programmation asynchrone traite plusieurs lignes de codes simultanément. Il n'attend pas que la ligne de code précédente d'un programme ait terminé son exécution avant de passer à la suivante.

En rapport: Synchrone vs. Programmation asynchrone: en quoi sont-elles différentes ?

La programmation asynchrone peut réduire de moitié le temps d'exécution, créant ainsi des ordinateurs plus rapides.

Exemple de programme asynchrone

const AsyncCode = () => {
 console.log("Ceci est la première ligne du programme")
 setTimeout(() => {
 console.log("Ceci est la deuxième ligne du programme")
 }, 3000)
 console.log("Ceci est la dernière ligne du programme")
}
AsyncCode();

L'exécution du code JavaScript ci-dessus produira le résultat suivant dans votre console :

Ceci est la première ligne du programme
Ceci est la dernière ligne du programme
Ceci est la deuxième ligne du programme

Si vous comparez la sortie de la console ci-dessus au programme asynchrone qui la génère, vous verrez qu'il y a une différence évidente. L'appel à Journal qui dit "Ceci est la deuxième ligne du programme" apparaît avant celui qui dit "Ceci est la dernière ligne du programme". Cependant, la sortie de la console ne reflète pas cela.

Étant donné que JavaScript est principalement synchrone, le code du programme ci-dessus s'est exécuté de manière séquentielle. Mais JavaScript prend en charge la programmation asynchrone via des fonctionnalités telles que setTimeout() méthode.

le setTimeout() method est une méthode JavaScript asynchrone qui prend deux arguments: une fonction et un délai. Le délai est une minuterie (en millisecondes) qui retarde l'exécution de la fonction. Ainsi, pendant que le programme ci-dessus attend les trois secondes pour exécuter la fonction dans le setTimeout() méthode, il passe à la ligne suivante dans le code. Cela se traduit par l'exécution du troisième appel de fonction avant le second.

Technologies JavaScript asynchrones

Séparé de setTimeout() méthode mentionnée ci-dessus, plusieurs technologies JavaScript utilisent la programmation asynchrone. Ces technologies utilisent le modèle de programmation asynchrone pour développer des applications non bloquantes plus rapides. Certaines de ces technologies incluent :

• jQuery Ajax
• Axios
• NodeJSName

En rapport: Qu'est-ce que Node.js? Voici comment utiliser JavaScript côté serveur

Création de programmes asynchrones avec JavaScript

Il existe plusieurs façons de gérer le code asynchrone. La méthode que vous choisissez doit dépendre du type d'application que vous souhaitez développer. Ces méthodes incluent des fonctions de rappel, des promesses et async/wait.

Fonctions de rappel

Il existe deux propriétés importantes d'une fonction de rappel. Ils servent de paramètres pour d'autres fonctions et ils s'appuient sur des événements externes pour accomplir leur devoir. le setTimeout() La méthode utilisée dans l'exemple asynchrone ci-dessus est une fonction de rappel. Le programme lui passe une fonction de journalisation en paramètre (la fonction de rappel) et ne l'exécute qu'après trois secondes (l'événement).

Les fonctions de rappel sont idéales pour les petits programmes, mais à mesure que vos applications se développent, elles peuvent devenir trop compliquées très rapidement. En effet, les fonctions de rappel appellent souvent d'autres fonctions de rappel, créant ainsi une chaîne de rappels imbriqués.

Utiliser des promesses

JavaScript a ajouté la prise en charge des promesses après les fonctions de rappel. Ils constituent une bonne alternative lors de la création d'applications plus volumineuses. Une promesse représente ce qui pourrait se passer après une opération asynchrone. Ce résultat potentiel prendra l'une des deux formes suivantes: résolu ou rejeté. Une fonction distincte gère chacun de ces résultats, supprimant le besoin d'imbrication (le problème de la fonction de rappel). Au lieu de cela, les promesses encouragent les fonctions de chaîne qui sont plus faciles à utiliser.

Chaque promesse commence par une nouvelle Promettre objet qui a une fonction anonyme avec le résoudre et rejeter paramètres. Dans cette fonction, vous aurez l'application asynchrone, qui renvoie une résolution si l'opération asynchrone réussit, ou un rejet dans le cas contraire.

le ensuite() la fonction de chaîne gère la résoudre fonction, et la attraper() la fonction de chaîne gère la rejeter une fonction. Ainsi, il n'y a pas besoin d'instructions if imbriquées, comme c'est le cas avec les fonctions de rappel.

Exemple d'utilisation de promesses

const PromiseFunction = () =>{
 return new Promise((résoudre, rejeter) => {
 setTimeout(() => {
 résoudre("cette opération asynchrone s'est bien exécutée")
 }, 3000)
 })
}
PromiseFunction().then((résultat) => {
 console.log("Succès", résultat)
}).catch((erreur) => {
 console.log("Erreur", erreur)
})

Le code ci-dessus renvoie le résultat suivant dans la console :

Succès cette opération asynchrone s'est bien exécutée

C'est parce que la promesse renvoie le résoudre fonction, qui transmet ses résultats à la ensuite() une fonction. Si la promesse renvoie le rejeter fonction le programme utilise la attraper fonction à la place.

Utilisation de Async/Attente

Si vous ne souhaitez pas créer de chaîne de promesses lorsque vous traitez des opérations asynchrones, vous pouvez essayer async/wait. Async/wait n'est pas un outil asynchrone complètement différent des promesses, juste une façon différente de les gérer. Il gère les promesses sans utiliser la méthode de la chaîne. Ainsi, de la même manière que les promesses gèrent mieux les opérations asynchrones que les fonctions de rappel, async/wait présente des avantages par rapport aux promesses simples.

Il existe deux attributs clés de chaque fonction async/wait. Ils commencent par le asynchrone mot-clé, et le attendre mot clé attend le résultat d'une opération asynchrone.

Exemple de programme asynchrone/en attente

const PromiseFunction = () =>{
 return new Promise((résoudre, rejeter) => {
 setTimeout(() => {
 résoudre("cette opération asynchrone s'est bien exécutée")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const résultat = attendre PromiseFunction();
 console.log (résultat);
}
AsyncAwaitFunc();

Le code ci-dessus renverra la sortie suivante dans la console :

cette opération asynchrone s'est bien exécutée

Quels sont les principaux plats à emporter ?

Il y a plusieurs points majeurs que vous devriez retenir de cet article :

• La programmation asynchrone est précieuse car elle réduit le temps d'attente d'un programme, créant des applications plus rapides.
• Une fonction de rappel peut être synchrone ou asynchrone.
• Les promesses offrent un meilleur moyen de gérer les opérations asynchrones que les fonctions de rappel.
• Les fonctions async/wait gèrent les promesses mieux que d'utiliser les fonctions de chaîne.
• Une fonction async/wait gère les opérations asynchrones d'une manière qui semble synchrone, ce qui la rend plus facile à comprendre.
• Les fonctions fléchées vous aident à écrire un meilleur code.

Les fonctions de flèche JavaScript peuvent faire de vous un meilleur développeur

Vous voulez être meilleur en développement web? Les fonctions fléchées, ajoutées à JavaScript ES6, vous offrent deux façons de créer des fonctions pour les applications Web.

Lire la suite

A propos de l'auteur