Article original : JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦
Aujourd'hui, nous allons créer et gérer une boutique de glaces et apprendre JavaScript asynchrone en même temps. En cours de route, vous apprendrez à utiliser :
- Les Callbacks
- Les Promises
- Async / Await
Voici ce que nous allons couvrir dans cet article :
- Qu'est-ce que JavaScript Asynchrone ?
- JavaScript Synthrone vs Asynchrone
- Comment fonctionnent les Callbacks en JavaScript
- Comment fonctionnent les Promises en JavaScript
- Comment fonctionne Async / Await en JavaScript
Alors, plongeons-nous !
Vous pouvez Ă©galement regarder ce tutoriel sur YouTube si vous le souhaitez :
Qu'est-ce que JavaScript Asynchrone ?
Si vous voulez construire des projets efficacement, alors ce concept est pour vous.
La théorie de l'async JavaScript vous aide à décomposer de grands projets complexes en tâches plus petites.
Ensuite, vous pouvez utiliser l'une de ces trois techniques – callbacks, promises ou Async/await – pour exécuter ces petites tâches de manière à obtenir les meilleurs résultats.
Plongeons-nous !🎖️
JavaScript Synthrone vs Asynchrone
Qu'est-ce qu'un Système Synthrone ?
Dans un système synthrone, les tâches sont accomplies les unes après les autres.
Imaginez cela comme si vous n'aviez qu'une seule main pour accomplir 10 tâches. Vous devez donc compléter une tâche à la fois.
Regardez le GIF 👋 – une seule chose se passe à la fois ici :
Vous verrez que tant que la première image n'est pas complètement chargée, la deuxième image ne commence pas à se charger.
Eh bien, JavaScript est par défaut Synthrone [mono-thread]. Pensez-y comme ceci – un thread signifie une main avec laquelle faire des choses.
Qu'est-ce qu'un Système Asynchrone ?
Dans ce système, les tâches sont accomplies indépendamment.
Ici, imaginez que pour 10 tâches, vous avez 10 mains. Chaque main peut donc faire chaque tâche indépendamment et en même temps.
Regardez le GIF 👋 – vous pouvez voir que chaque image se charge en même temps.
Encore une fois, toutes les images se chargent Ă leur propre rythme. Aucune d'entre elles n'attend les autres.
Pour RĂ©sumer Synthrone vs Asynchrone JS :
Lorsque trois images sont dans un marathon, dans un :
- Système Synthrone, les trois images sont dans la même voie. L'une ne peut pas dépasser l'autre. La course se termine une par une. Si l'image numéro 2 s'arrête, l'image suivante s'arrête.
- Système Asynchrone, les trois images sont dans des voies différentes. Elles termineront la course à leur propre rythme. Personne ne s'arrête pour personne :
Exemples de Code Synthrone et Asynchrone
Avant de commencer notre projet, regardons quelques exemples et clarifions tout doute.
Exemple de Code Synthrone
Pour tester un système synthrone, écrivez ce code en JavaScript :
console.log(" Je ");
console.log(" mange ");
console.log(" de la glace ");
Voici le résultat dans la console : 👋
Exemple de code asynchrone
Disons qu'il faut deux secondes pour manger de la glace. Maintenant, testons un système asynchrone. Écrivez le code ci-dessous en JavaScript.
Note : Ne vous inquiétez pas, nous discuterons de la fonction setTimeout() plus tard dans cet article.
console.log("Je");
// Cela sera affiché après 2 secondes
setTimeout(()=>{
console.log("mange");
},2000)
console.log("de la glace")
Et voici le résultat dans la console : 👋
Maintenant que vous connaissez la différence entre les opérations synthrones et asynchrones, construisons notre boutique de glaces.
Comment configurer notre projet
Pour ce projet, vous pouvez simplement ouvrir Codepen.io et commencer Ă coder. Ou, vous pouvez le faire dans VS code ou l'Ă©diteur de votre choix.
Ouvrez la section JavaScript, puis ouvrez votre console de développement. Nous écrivons notre code et verrons les résultats dans la console.
Que sont les Callbacks en JavaScript ?
Lorsque vous imbriquez une fonction à l'intérieur d'une autre fonction en tant qu'argument, cela s'appelle un callback.
Voici une illustration d'un callback :
Un exemple de callback
Ne vous inquiétez pas, nous verrons quelques exemples de callbacks dans une minute.
Pourquoi utilisons-nous des callbacks ?
Lorsque nous effectuons une tâche complexe, nous décomposons cette tâche en étapes plus petites. Pour nous aider à établir une relation entre ces étapes selon le temps (optionnel) et l'ordre, nous utilisons des callbacks.
Regardez cet exemple :đź‘‹
Le graphique contient les Ă©tapes pour faire de la glace
Ce sont les petites Ă©tapes que vous devez suivre pour faire de la glace. Notez Ă©galement que dans cet exemple, l'ordre des Ă©tapes et le timing sont cruciaux. Vous ne pouvez pas simplement couper les fruits et servir la glace.
En même temps, si une étape précédente n'est pas terminée, nous ne pouvons pas passer à l'étape suivante.
Pour expliquer cela plus en détail, commençons notre entreprise de boutique de glaces.
Mais attendez...
La boutique aura deux parties :
- La réserve contiendra tous les ingrédients [Notre Backend]
- Nous produirons de la glace dans notre cuisine [Le frontend]
Stockez nos données
Maintenant, nous allons stocker nos ingrédients à l'intérieur d'un objet. Commençons !
Vous pouvez stocker les ingrédients à l'intérieur d'objets comme ceci : 👋
let stocks = {
Fruits : ["strawberry", "grapes", "banana", "apple"]
}
Nos autres ingrédients sont ici : 👋
Vous pouvez stocker ces autres ingrédients dans des objets JavaScript comme ceci : 👋
let stocks = {
Fruits : ["strawberry", "grapes", "banana", "apple"],
liquid : ["water", "ice"],
holder : ["cone", "cup", "stick"],
toppings : ["chocolate", "peanuts"],
};
Toute l'entreprise dépend de ce qu'un client commande. Une fois que nous avons une commande, nous commençons la production et ensuite nous servons la glace. Nous allons donc créer deux fonctions ->
orderproduction
Voici comment tout cela fonctionne : đź‘‹
Obtenir la commande du client, récupérer les ingrédients, commencer la production, puis servir.
Créons nos fonctions. Nous utiliserons des fonctions fléchées ici :
let order = () =>{};
let production = () =>{};
Maintenant, Ă©tablissons une relation entre ces deux fonctions en utilisant un callback, comme ceci : đź‘‹
let order = (call_production) =>{
call_production();
};
let production = () =>{};
Faisons un petit test
Nous utiliserons la fonction console.log() pour effectuer des tests afin de clarifier tout doute que nous pourrions avoir concernant la manière dont nous avons établi la relation entre les deux fonctions.
let order = (call_production) =>{
console.log("Commande passée. Veuillez appeler la production")
// la fonction 👋 est appelée
call_production();
};
let production = () =>{
console.log("La production a commencé")
};
Pour exécuter le test, nous appellerons la fonction order. Et nous ajouterons la deuxième fonction nommée production comme argument.
// nom 👋 de notre deuxième fonction
order(production);
Voici le résultat dans notre console 👋
Faites une pause
Jusqu'à présent, tout va bien – faites une pause !
Effacez le console.log
Gardez ce code et supprimez tout [ne supprimez pas notre variable stocks]. Dans notre première fonction, passez un autre argument afin que nous puissions recevoir la commande [Nom du fruit] :
// Fonction 1
let order = (fruit_name, call_production) =>{
call_production();
};
// Fonction 2
let production = () =>{};
// DĂ©clencheur đź‘‹
order("", production);
Voici nos étapes, et le temps que chaque étape prendra pour s'exécuter.
Graphique contenant les Ă©tapes pour faire de la glace
Dans ce graphique, vous pouvez voir que l'étape 1 est de passer la commande, ce qui prend 2 secondes. Ensuite, l'étape 2 est de couper le fruit (2 secondes), l'étape 3 est d'ajouter de l'eau et de la glace (1 seconde), l'étape 4 est de démarrer la machine (1 seconde), l'étape 5 est de sélectionner le contenant (2 secondes), l'étape 6 est de sélectionner les garnitures (3 secondes) et l'étape 7, l'étape finale, est de servir la glace ce qui prend 2 secondes.
Pour Ă©tablir le timing, la fonction setTimeout() est excellente car elle utilise Ă©galement un callback en prenant une fonction comme argument.
Syntaxe d'une fonction setTimeout()
Maintenant, sélectionnons notre fruit et utilisons cette fonction :
// 1ère Fonction
let order = (fruit_name, call_production) =>{
setTimeout(function(){
console.log(`${stocks.Fruits[fruit_name]} was selected`)
// Commande passée. Appeler la production pour démarrer
call_production();
},2000)
};
// 2ème Fonction
let production = () =>{
// vide pour l'instant
};
// DĂ©clencheur đź‘‹
order(0, production);
Et voici le résultat dans la console : 👋
Notez que le résultat s'affiche après 2 secondes.
Si vous vous demandez comment nous avons choisi la fraise dans notre variable de stock, voici le code avec le format đź‘‹
Ne supprimez rien. Maintenant, nous allons commencer à écrire notre fonction de production avec le code suivant. 👋 Nous utiliserons des fonctions fléchées :
let production = () =>{
setTimeout(()=>{
console.log("production has started")
},0000)
};
Et voici le résultat 👋
Nous allons imbriquer une autre fonction setTimeout dans notre fonction setTimeout existante pour couper le fruit. Comme ceci : đź‘‹
let production = () =>{
setTimeout(()=>{
console.log("production has started")
setTimeout(()=>{
console.log("The fruit has been chopped")
},2000)
},0000)
};
Et voici le résultat 👋
Si vous vous souvenez, voici nos Ă©tapes :
Graphique contenant les Ă©tapes pour faire de la glace
Complétons notre production de glace en imbriquant une fonction à l'intérieur d'une autre fonction – cela s'appelle également un callback, vous vous souvenez ?
let production = () =>{
setTimeout(()=>{
console.log("production has started")
setTimeout(()=>{
console.log("The fruit has been chopped")
setTimeout(()=>{
console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
setTimeout(()=>{
console.log("start the machine")
setTimeout(()=>{
console.log(`Ice cream placed on ${stocks.holder[1]}`)
setTimeout(()=>{
console.log(`${stocks.toppings[0]} as toppings`)
setTimeout(()=>{
console.log("serve Ice cream")
},2000)
},3000)
},2000)
},1000)
},1000)
},2000)
},0000)
};
Et voici le résultat dans la console 👋
Vous vous sentez confus ?
Cela s'appelle l'enfer des callbacks. Cela ressemble Ă quelque chose comme ceci (vous vous souvenez de ce code juste au-dessus ?) : đź‘‹
Illustration de l'enfer des callbacks
Quelle est la solution Ă cela ?
Comment utiliser les Promises pour Ă©chapper Ă l'enfer des callbacks
Les Promises ont été inventées pour résoudre le problème de l'enfer des callbacks et pour mieux gérer nos tâches.
Faites une pause
Mais d'abord, faites une pause !
Voici Ă quoi ressemble une promise :
illustration du format d'une promise
DĂ©cortiquons les promises ensemble.
Une illustration de la vie d'une promise
Comme le montrent les graphiques ci-dessus, une promise a trois Ă©tats :
- En attente (Pending) : C'est l'étape initiale. Rien ne se passe ici. Pensez à cela comme si votre client prenait son temps pour vous donner une commande. Mais ils n'ont encore rien commandé.
- Résolue (Resolved) : Cela signifie que votre client a reçu sa nourriture et est heureux.
- Rejetée (Rejected) : Cela signifie que votre client n'a pas reçu sa commande et a quitté le restaurant.
Adoptons les promises pour notre Ă©tude de cas de production de glace.
Mais attendez...
Nous devons d'abord comprendre quatre autres choses ->
- Relation entre le temps et le travail
- Chaînage des promises
- Gestion des erreurs
- Le gestionnaire
.finally
Commençons notre boutique de glaces et comprenons chacun de ces concepts un par un en prenant des petits pas.
Relation entre le temps et le travail
Si vous vous souvenez, voici nos Ă©tapes et le temps que chacune prend pour faire de la glace"
Graphique contenant les Ă©tapes pour faire de la glace
Pour que cela se produise, créons une variable en JavaScript : 👋
let is_shop_open = true;
Maintenant, créez une fonction nommée order et passez deux arguments nommés time, work :
let order = ( time, work ) =>{
}
Maintenant, nous allons faire une promise Ă notre client, "Nous vous servirons de la glace" Comme ceci ->
let order = ( time, work ) =>{
return new Promise( ( resolve, reject )=>{ } )
}
Notre promise a 2 parties :
- Résolue [glace livrée]
- Rejetée [le client n'a pas reçu de glace]
let order = ( time, work ) => {
return new Promise( ( resolve, reject )=>{
if( is_shop_open ){
resolve( )
}
else{
reject( console.log("Notre boutique est fermée") )
}
})
}
Ajoutons les facteurs temps et travail à l'intérieur de notre promise en utilisant une fonction setTimeout() à l'intérieur de notre instruction if. Suivez-moi 👋
Note : Dans la vraie vie, vous pouvez également éviter le facteur temps. Cela dépend entièrement de la nature de votre travail.
let order = ( time, work ) => {
return new Promise( ( resolve, reject )=>{
if( is_shop_open ){
setTimeout(()=>{
// le travail đź‘‹ est en train d'ĂŞtre fait ici
resolve( work() )
// DĂ©finir đź‘‹ le temps ici pour 1 travail
}, time)
}
else{
reject( console.log("Notre boutique est fermée") )
}
})
}
Maintenant, nous allons utiliser notre fonction nouvellement créée pour commencer la production de glace.
// DĂ©finir đź‘‹ le temps ici
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
// passer une ⚪ fonction ici pour commencer à travailler
Le résultat 👋 après 2 secondes ressemble à ceci :
Bon travail !
Chaînage des Promises
Dans cette méthode, nous définissons ce que nous devons faire lorsque la première tâche est terminée en utilisant le gestionnaire .then. Cela ressemble à quelque chose comme ceci 👋
Illustration du chaînage des promises en utilisant le gestionnaire .then
Le gestionnaire .then retourne une promise lorsque notre promise originale est résolue.
Voici un exemple :
Permettez-moi de simplifier : c'est similaire Ă donner des instructions Ă quelqu'un. Vous dites Ă quelqu'un de "D'abord fais ceci, puis fais cela, puis cette autre chose, puis.., puis.., puis..." et ainsi de suite.
- La première tâche est notre promise originale.
- Le reste des tâches retourne notre promise une fois qu'un petit morceau de travail est terminé
Mettons cela en Ĺ“uvre dans notre projet. En bas de votre code, Ă©crivez les lignes suivantes. đź‘‹
Note : n'oubliez pas d'écrire le mot return à l'intérieur de votre gestionnaire .then. Sinon, cela ne fonctionnera pas correctement. Si vous êtes curieux, essayez de supprimer le return une fois que nous avons terminé les étapes :
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))
.then(()=>{
return order(0000,()=>console.log('production has started'))
})
Et voici le résultat : 👋
En utilisant le même système, terminons notre projet :👋
// Ă©tape 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))
// Ă©tape 2
.then(()=>{
return order(0000,()=>console.log('production has started'))
})
// Ă©tape 3
.then(()=>{
return order(2000, ()=>console.log("Fruit has been chopped"))
})
// Ă©tape 4
.then(()=>{
return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})
// Ă©tape 5
.then(()=>{
return order(1000, ()=>console.log("start the machine"))
})
// Ă©tape 6
.then(()=>{
return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})
// Ă©tape 7
.then(()=>{
return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})
// Étape 8
.then(()=>{
return order(2000, ()=>console.log("Serve Ice Cream"))
})
Voici le résultat : 👋
Gestion des erreurs
Nous avons besoin d'un moyen de gérer les erreurs lorsque quelque chose ne va pas. Mais d'abord, nous devons comprendre le cycle de la promise :
Une illustration de la vie d'une promise
Pour attraper nos erreurs, changeons notre variable en false.
let is_shop_open = false;
Ce qui signifie que notre boutique est fermée. Nous ne vendons plus de glace à nos clients.
Pour gérer cela, nous utilisons le gestionnaire .catch. Tout comme .then, il retourne également une promise, mais seulement lorsque notre promise originale est rejetée.
Un petit rappel ici :
.thenfonctionne lorsqu'une promise est résolue.catchfonctionne lorsqu'une promise est rejetée
Descendez tout en bas et Ă©crivez le code suivant :đź‘‹
Rappelez-vous simplement qu'il ne doit y avoir rien entre votre gestionnaire .then précédent et le gestionnaire .catch.
.catch(()=>{
console.log("Customer left")
})
Voici le résultat :👋
Quelques points Ă noter sur ce code :
- Le 1er message provient de la partie
reject()de notre promise - Le 2ème message provient du gestionnaire
.catch
Comment utiliser le gestionnaire .finally()
Il y a quelque chose appelé le gestionnaire finally qui fonctionne indépendamment du fait que notre promise ait été résolue ou rejetée.
Par exemple : que nous servions aucun client ou 100 clients, notre boutique fermera à la fin de la journée
Si vous ĂŞtes curieux de tester cela, venez tout en bas et Ă©crivez ce code : đź‘‹
.finally(()=>{
console.log("end of day")
})
Le résultat :👋
Tout le monde, veuillez accueillir Async / Await~
Comment fonctionne Async / Await en JavaScript ?
Cela est censé être la meilleure façon d'écrire des promises et cela nous aide à garder notre code simple et propre.
Tout ce que vous avez à faire est d'écrire le mot async avant toute fonction régulière et elle devient une promise.
Mais d'abord, faites une pause
Jetons un coup d'Ĺ“il :đź‘‹
Promises vs Async/Await en JavaScript
Avant async/await, pour faire une promise nous Ă©crivions ceci :
function order(){
return new Promise( (resolve, reject) =>{
// Écrire le code ici
} )
}
Maintenant, en utilisant async/await, nous en Ă©crivons une comme ceci :
//
async function order() {
// Écrire le code ici
}
Mais attendez......
Vous devez comprendre ->
- Comment utiliser les mots-clés
tryetcatch - Comment utiliser le mot-clé await
Comment utiliser les mots-clés Try et Catch
Nous utilisons le mot-clé try pour exécuter notre code tandis que nous utilisons catch pour attraper nos erreurs. C'est le même concept que nous avons vu lorsque nous avons regardé les promises.
Regardons une comparaison. Nous verrons une petite démonstration du format, puis nous commencerons à coder.
Promises en JS -> resolve ou reject
Nous avons utilisé resolve et reject dans les promises comme ceci :
function kitchen(){
return new Promise ((resolve, reject)=>{
if(true){
resolve("promise is fulfilled")
}
else{
reject("error caught here")
}
})
}
kitchen() // exécuter le code
.then() // Ă©tape suivante
.then() // Ă©tape suivante
.catch() // erreur attrapée ici
.finally() // fin de la promise [optionnel]
Async / Await en JS -> try, catch
Lorsque nous utilisons async/await, nous utilisons ce format :
//
async function kitchen(){
try{
// Créons un faux problème
await abc;
}
catch(error){
console.log("abc does not exist", error)
}
finally{
console.log("Runs code anyways")
}
}
kitchen() // exécuter le code
Ne paniquez pas, nous discuterons du mot-clé await ensuite.
Maintenant, espérons que vous comprenez la différence entre les promises et Async / Await.
Comment utiliser le mot-clé Await de JavaScript
Le mot-clé await fait attendre JavaScript jusqu'à ce qu'une promise soit réglée et retourne son résultat.
Comment utiliser le mot-clé await en JavaScript
Retourons à notre boutique de glaces. Nous ne savons pas quelle garniture un client pourrait préférer, chocolat ou cacahuètes. Nous devons donc arrêter notre machine et aller demander à notre client ce qu'il aimerait sur sa glace.
Remarquez ici que seule notre cuisine est arrêtée, mais notre personnel à l'extérieur de la cuisine continuera à faire des choses comme :
- faire la vaisselle
- nettoyer les tables
- prendre les commandes, et ainsi de suite.
Un exemple de code avec le mot-clé Await
Créons une petite promise pour demander quelle garniture utiliser. Le processus prend trois secondes.
function toppings_choice (){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve( console.log("which topping would you love?") )
},3000)
})
}
Maintenant, créons notre fonction kitchen avec le mot-clé async d'abord.
async function kitchen(){
console.log("A")
console.log("B")
console.log("C")
await toppings_choice()
console.log("D")
console.log("E")
}
// DĂ©clencher la fonction
kitchen();
Ajoutons d'autres tâches en dessous de l'appel kitchen().
console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")
Et voici le résultat :
Nous sortons littéralement de notre cuisine pour demander à notre client, "quel est votre choix de garniture ?" En attendant, d'autres choses continuent à être faites.
Une fois que nous avons leur choix de garniture, nous entrons dans la cuisine et terminons le travail.
Petite note
Lorsque vous utilisez Async/Await, vous pouvez Ă©galement utiliser les gestionnaires .then, .catch et .finally qui sont une partie centrale des promises.
Ouvrons Ă nouveau notre boutique de glaces
Nous allons créer deux fonctions ->
kitchen: pour faire de la glacetime: pour assigner la quantité de temps que chaque petite tâche prendra.
Commençons ! Créez d'abord la fonction time :
let is_shop_open = true;
function time(ms) {
return new Promise( (resolve, reject) => {
if(is_shop_open){
setTimeout(resolve,ms);
}
else{
reject(console.log("Shop is closed"))
}
});
}
Maintenant, créons notre cuisine :
async function kitchen(){
try{
// instruction ici
}
catch(error){
// gestion des erreurs ici
}
}
// DĂ©clencheur
kitchen();
Donnons de petites instructions et testons si notre fonction kitchen fonctionne ou non :
async function kitchen(){
try{
// temps pris pour effectuer cette 1 tâche
await time(2000)
console.log(`${stocks.Fruits[0]} was selected`)
}
catch(error){
console.log("Customer left", error)
}
finally{
console.log("Day ended, shop closed")
}
}
// DĂ©clencheur
kitchen();
Le résultat ressemble à ceci lorsque la boutique est ouverte : 👋
Le résultat ressemble à ceci lorsque la boutique est fermée : 👋
Jusqu'à présent, tout va bien.
Complétons notre projet.
Voici la liste de nos tâches à nouveau : 👋
Graphique contenant les Ă©tapes pour faire de la glace
Tout d'abord, ouvrons notre boutique
let is_shop_open = true;
Maintenant, écrivez les étapes à l'intérieur de notre fonction kitchen() : 👋
async function kitchen(){
try{
await time(2000)
console.log(`${stocks.Fruits[0]} was selected`)
await time(0000)
console.log("production has started")
await time(2000)
console.log("fruit has been chopped")
await time(1000)
console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)
await time(1000)
console.log("start the machine")
await time(2000)
console.log(`ice cream placed on ${stocks.holder[1]}`)
await time(3000)
console.log(`${stocks.toppings[0]} as toppings`)
await time(2000)
console.log("Serve Ice Cream")
}
catch(error){
console.log("customer left")
}
}
Et voici le résultat : 👋
Conclusion
FĂ©licitations pour avoir lu jusqu'Ă la fin ! Dans cet article, vous avez appris :
- La différence entre les systèmes synthrones et asynchrones
- Les mécanismes de JavaScript asynchrone en utilisant 3 techniques (callbacks, promises et Async/Await)
Voici votre médaille pour avoir lu jusqu'à la fin. ❤️
Les suggestions et critiques sont grandement appréciées ❤️
YouTube / Joy Shaheb
LinkedIn / JoyShaheb
Twitter / JoyShaheb
Instagram / JoyShaheb