Maitrisez la Programmation Asynchrone
Salut HaWker ! Jeff Bruchado par ici.
C'est un autre article de notre serie d'articles qui va couvrir notre voyage pour Apprendre la Programmation depuis Zero.
Bon, sans plus tarder, commencons !
Aujourd'hui, nous allons parler de la Programmation Asynchrone en JavaScript :
Pensons a un scenario :
Vous creez une application et dedans il y a une partie qui doit chercher des informations meteo, comme previsions, temperature et differents types de donnees, directement depuis une API (une source externe de donnees).
Alors vous me demandez : "Et alors ? Quelle est la difference ?"
La difference, mon cher, c'est que ces informations n'arrivent pas instantanement, comme une commande au drive-thru.
Elles peuvent prendre un peu de temps, parce qu'elles dependent d'une connexion internet, du serveur de l'API... et quelques autres choses.
La Programmation Asynchrone entre en scene pour gerer ces attentes, sans laisser votre app bloquee, en attendant que la reponse arrive.
C'est comme commander une pizza et pouvoir regarder votre serie preferee en attendant la livraison, vous comprenez ?
Pourquoi c'est important ?
Avec ca, le programme ne bloque pas : Sans asynchronie, votre app serait figee, en attendant la reponse de l'API. Avec elle, l'app continue de tourner fluidement pendant qu'elle attend.
Ameliore l'experience utilisateur : Personne n'aime une app qui bloque ou met du temps a repondre. La Programmation Asynchrone garde les choses fluides.
Efficacite : Vous pouvez faire plusieurs choses en meme temps. Pendant qu'une information est recherchee, d'autres parties de votre app peuvent continuer a fonctionner.
En JavaScript, la magie se passe avec des outils comme Promises et Async/Await.
Ce sont comme des contrats que quelque chose va se passer, mais pas au moment present.
Par exemple :
fetch('url-de-l-api-meteo')
.then(reponse => reponse.json())
.then(donnees => console.log(donnees))
.catch(erreur => console.log(erreur));Dans ce code, la fonction fetch cherche les donnees, et pendant ce temps, le reste de votre app ne reste pas bloque en attendant. Quand les donnees arrivent, le .then() est execute.
Alors c'est ca : la Programmation Asynchrone est fondamentale parce qu'elle garde votre app agile, efficace et beaucoup plus agreable a utiliser.
Sans elle, ce serait comme rester dans une longue file en attendant quelque chose qui pourrait etre fait pendant que vous faites d'autres choses.
Qui veut ca, n'est-ce pas ?
Comprendre la Programmation Asynchrone
La Programmation Asynchrone est une technique de programmation qui permet au code de s'executer de maniere non-bloquante.
Cela signifie que pendant qu'une tache est realisee, le code peut continuer a etre execute sans attendre la fin de la tache.
C'est utile quand la tache peut prendre beaucoup de temps a etre completee, comme faire un appel API.
En JavaScript, la programmation asynchrone est generalement implementee avec des callbacks ou des promises.
Callbacks
Ce sont des fonctions qui sont passees comme arguments a d'autres fonctions et sont appelees quand l'operation asynchrone est terminee.
Par exemple :
function obtenirDonnees(callback) {
// fait une requete et obtient les donnees
let donnees = 'quelques donnees';
callback(donnees);
}
obtenirDonnees(function (donnees) {
console.log(donnees); // quelques donnees
});Les callbacks sont une piece cle dans le puzzle de la Programmation Asynchrone, et comprendre comment ils fonctionnent va vous sauver de beaucoup de maux de tete.
Alors, que sont ces fameux Callbacks ?
Imaginez que vous organisez une fete et demandez a votre ami d'apporter les boissons. Vous dites : "Appelle-moi quand tu arrives, je descendrai pour t'aider a monter tout ca".
Ce "appelle-moi quand tu arrives" est basiquement un callback dans la vie reelle.
Dans le monde de la programmation, un callback est une fonction qui est passee comme argument a une autre fonction et est executee apres qu'une tache soit completee.
Pourquoi sont-ils importants ?
Controle de flux asynchrone : En JavaScript, souvent, vous gerez des operations qui prennent du temps a se realiser, comme chercher des donnees d'une API. Les Callbacks vous aident a dire : "Hey, apres avoir fini ca ici, fais ca ici".
Continuation du code : Ils permettent de continuer avec d'autres operations pendant que vous attendez que quelque chose soit complete. Avec ca, votre programme ne reste pas bloque en attendant.
Manipulation des resultats : Quand vous recevez le resultat d'une operation asynchrone, le callback gere ce resultat. C'est-a-dire, vous pouvez traiter et utiliser ces donnees.
Par exemple :
function chercherDonnees(url, callback) {
fetch(url)
.then(reponse => reponse.json())
.then(donnees => callback(null, donnees))
.catch(erreur => callback(erreur, null));
}
chercherDonnees('url-de-l-api', function (erreur, donnees) {
if (erreur) {
console.log('Oups, il y a eu une erreur:', erreur);
} else {
console.log('Voici les donnees:', donnees);
}
});Dans ce code, chercherDonnees est une fonction qui cherche des donnees d'une API. Quand la recherche est terminee (que ce soit avec succes ou erreur), le callback est appele avec les resultats.
Mais attention : les Callbacks peuvent mener au redoute "Callback Hell" ou "Pyramid of Doom", qui est quand vous avez un tas de callbacks imbriques et votre code devient un labyrinthe.
Pour ca, il est important d'utiliser avec sagesse et de considerer des alternatives comme les Promises et Async/Await pour garder le code propre et lisible.
Alors voila, les callbacks sont comme les messagers du monde asynchrone, transportant des informations d'un point a un autre et garantissant que les choses se passent dans le bon ordre. Cool, non ?!
Promises
Les Promises sont une ressource plus moderne pour gerer la programmation asynchrone.
Ce sont des objets qui representent l'eventuelle completion ou echec d'une operation asynchrone.
Au lieu de passer une fonction callback comme argument, vous pouvez utiliser la methode then de la Promise pour specifier ce qui doit etre fait quand la Promise est resolue ou rejetee.
Par exemple :
function obtenirDonnees() {
return new Promise(function (resolve, reject) {
// fait une requete et obtient les donnees
let donnees = 'quelques donnees';
resolve(donnees);
});
}
obtenirDonnees()
.then(function (donnees) {
console.log(donnees); // quelques donnees
})
.catch(function (erreur) {
console.error(erreur);
});L'operateur async et le mot-cle await sont une forme encore plus pratique de gerer la programmation asynchrone.
Ils permettent d'ecrire du code qui ressemble a du synchrone, mais qui est en realite asynchrone.
Par exemple :
async function obtenirDonnees() {
// fait une requete et obtient les donnees
let donnees = await uneFonctionAsynchrone();
console.log(donnees);
}
obtenirDonnees();Callback Hell
Le Callback Hell, comme je l'ai mentionne precedemment, est un terme utilise pour se referer au code qui consiste en de nombreuses couches de fonctions callback imbriquees, ce qui peut etre difficile a lire et maintenir.
C'est courant quand on utilise des callbacks pour gerer la programmation asynchrone et peut etre evite en utilisant des techniques comme les Promises et async/await.
Voici un exemple de comment le code peut devenir complique avec l'utilisation excessive de callbacks :
obtenirDonneesUtilisateur(function (utilisateur) {
obtenirCommentaires(utilisateur.id, function (commentaires) {
obtenirLikes(utilisateur.id, function (likes) {
obtenirAbonnes(utilisateur.id, function (abonnes) {
console.log(
`${utilisateur.nom} a ${commentaires.length} commentaires, ${likes.length} likes et ${abonnes.length} abonnes.`
);
});
});
});
});En utilisant les Promises, ce meme code peut etre ecrit de la facon suivante :
obtenirDonneesUtilisateur()
.then(function (utilisateur) {
return obtenirCommentaires(utilisateur.id);
})
.then(function (commentaires) {
return obtenirLikes(utilisateur.id);
})
.then(function (likes) {
return obtenirAbonnes(utilisateur.id);
})
.then(function (abonnes) {
console.log(
`${utilisateur.nom} a ${commentaires.length} commentaires, ${likes.length} likes et ${abonnes.length} abonnes.`
);
})
.catch(function (erreur) {
console.error(erreur);
});Et en utilisant async/await, le code peut etre ecrit de la facon suivante :
async function obtenirStats() {
try {
let utilisateur = await obtenirDonneesUtilisateur();
let commentaires = await obtenirCommentaires(utilisateur.id);
let likes = await obtenirLikes(utilisateur.id);
let abonnes = await obtenirAbonnes(utilisateur.id);
console.log(
`${utilisateur.nom} a ${commentaires.length} commentaires, ${likes.length} likes et ${abonnes.length} abonnes.`
);
} catch (erreur) {
console.error(erreur);
}
}
obtenirStats();Comme vous pouvez le voir, en utilisant les Promises ou async/await, le code devient plus lisible et facile a maintenir qu'en utilisant de multiples callbacks imbriques.
Conclusion
En resume, la programmation asynchrone est une technique qui permet au code de continuer a etre execute en attendant le retour d'un appel de fonction asynchrone.
C'est utile quand l'operation peut prendre beaucoup de temps a etre completee, comme quand nous faisons une requete a une API.
En JavaScript, il existe plusieurs facons de gerer la programmation asynchrone, comme les callbacks, les Promises et async/await.
Chacune de ces approches a ses propres avantages et inconvenients et il est important de comprendre quand utiliser chacune d'elles.
Personnellement j'utilise la regle suivante pour definir si j'utilise Promises ou async/await :
Quand une requete possede des donnees qui dependent de donnees d'une autre requete, async/await est le plus recommande, car de cette facon vous garantissez que la deuxieme requete ne sera executee qu'apres avoir recu la reponse de la premiere.
Mais comme vous pouvez le constater, cela fait que votre programme devient lent. En devant attendre la premiere requete pour seulement ensuite executer la prochaine.
Cependant, quand vous allez executer deux requetes en sequence, et qu'une requete ne depend pas de la reponse de l'autre, alors dans ce cas il est plus recommande d'utiliser les Promises, parce que de cette facon vous reussissez a executer les deux requetes en meme temps, rendant votre code beaucoup plus rapide.
De plus, il est important de faire attention au "Callback Hell", ou l'imbrication excessive de callbacks, pour garder le code lisible et facile a maintenir.
Eh bien HaWker, nous arrivons a la fin d'un autre article.
Comme toujours, si vous avez une question ou voulez explorer un point plus en detail, repondez simplement avec votre question, dans cet email.
Et rappelez-vous, je suis la pour vous aider a vous ameliorer de 1% a chaque nouvel article !
Si vous etes arrive jusqu'ici, comme d'habitude, s'il vous plait, repondez a cet email avec "J'ai reussi a comprendre la Programmation Asynchrone en JavaScript".
Ainsi je saurai que cette serie d'articles vous est utile, et que vous suivez et profitez.
Comme vous le savez deja ! Seul un veritable HaWker arrive jusqu'a la fin.
Felicitations !
Je suis content de vous avoir ici.
A bientot.
C'est parti !
- Jeff Bruchado
Felicitations d'etre arrive jusqu'ici, HaWker !
A ce moment ou vous avez appris la programmation asynchrone en JavaScript, que diriez-vous de tester vos connaissances ? Participez au quiz ci-dessous et voyez combien vous avez absorbe de notre article.
C'est une excellente facon de consolider l'apprentissage et de vous preparer pour les prochaines etapes de votre voyage de programmation.
Bonne chance et amusez-vous !