Les Promises JavaScript et l'Async/Await expliqués

Imaginez que vous commandiez une pizza en ligne.

Vous passez votre commande. Vous ne restez pas planté devant votre porte sans rien faire en attendant qu'elle arrive. Vous regardez des vidéos, vous travaillez ou vous discutez avec des amis. Quand la pizza arrive, vous mangez.

JavaScript fonctionne de la même manière.

Les opérations telles que les requêtes API, les appels à la base de données et les minuteurs prennent du temps. Si JavaScript attendait la fin de chaque tâche, votre application se figerait. Au lieu de cela, JavaScript exécute d'autres morceaux de code en attendant les résultats.

Qu'est-ce qu'une Promise ?

Une Promise est un substitut pour une valeur que vous obtiendrez dans le futur.

Lorsque vous exécutez : const promise = fetch("/users");

Les données ne sont pas encore là. La Promise dit : « Je n'ai pas le résultat pour le moment, mais je vous préviendrai quand il sera prêt. »

Une Promise possède trois états :

La plupart des API modernes comme fetch() renvoient automatiquement une Promise. Vous n'avez pas besoin de les créer manuellement à chaque fois. Vous les utilisez, tout simplement.

Que fait .then() ?

Beaucoup de gens pensent que .then() récupère les données. Ce n'est pas le cas.

.then() enregistre une fonction de rappel (callback). Vous dites à JavaScript : « Quand cette Promise est terminée, exécute cette fonction spécifique. »

C'est comme une application de livraison de nourriture. Vous commandez un repas, et l'application vous dit : « Appelez-moi quand la nourriture arrive. » La fonction attend le signal.

Pourquoi utiliser Async/Await ?

Vous pouvez enchaîner les appels .then() pour obtenir des données étape par étape. Cela fonctionne, mais les longues chaînes sont difficiles à lire.

Async/await permet à votre code de ressembler à du code normal, étape par étape. C'est plus propre et plus facile à suivre.

Est-ce que await bloque JavaScript ?

C'est une question d'entretien courante. La réponse est non.

Lorsque JavaScript rencontre le mot-clé await, il met en pause uniquement cette fonction async spécifique. Le reste de votre application continue de s'exécuter.

Exemple de flux :

  1. Exécute le code dans la fonction.
  2. Rencontre await et met la fonction en pause.
  3. Exécute le reste du script.
  4. Une fois la tâche terminée, reprend la fonction.

Résumé :

Source : https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm