Callbacks vs Promises vs Observables vs async/ await

JavaScript s'exécute d'une manière non bloquante, il exécute ligne par ligne, ce qui veut dire qu'il n'attends pas le résultat d'un code qui est asynchrone.

Nous pouvons travailler avec des opérations asynchrones, avec l'une des solutions suivantes :

• Callback : 
• Pros : qui est une fonction anonyme que nous passons en argument à notre méthode, et qui peut a son tour prendre des arguments (données), et permet de faire une exécution d'une manière asynchrone.
• Cons : "callback Hell", lorsqu'on plusieurs dépendances asynchrones, cela devient difficile à débugger et a gérer les erreurs.
• Promises :  Introduit depuis ES6 nativement sans besoin d'une librairie tier.
• Pros :  à l'intérieur de la méthode on crée une Promise avec le constructeur qui peut prendre des fonction en arguments : resolve , reject.  Puis, on appel resolve(data),  après l'appel de then() pour le retour des données.
• utile lorsque nous avons plusieurs dépendances asynchrones.
• Gestion des erreurs avec le bloc catch().
• Promise.all(iterable) 
• Promise.race(iterable)
• 
  
• Cons : Une seul opération asynchrone par promise.
• Ne permet pas de gérer plusieurs événements.
• Exemple : chargement des données avec une promesse
• const loadData = () => {
• return new Promise((resolves, rejects) => {
• const api  = 'xxx';
• const request = new XMLHttpRequest();
• request.open('GET', api);
• request.onload = ()  => {
• if (request.status === 200 ){ resolves(JSON.parse (reuqest.reponse));
• }else { rejects (Error(request.statusText));
• }
• };
• request.onerror = err => rejects (err);
• request.send();
• });
• }; 
•  Appel avec then()
• fetch()  est une bonne alternative pour faire des appels d'API. C'est une fonction native dans le navigateur et dans Nodejs aussi.
• RxJS Observables : utile lorsqu'on a un flux de données au lieu d'une seul valeur.
• 
• Async et await:  ne remplacent pas les promesses, ils les complètent.

Le mot-clé await permet d’attendre la résolution d’une opération asynchrone et d’en récupérer le résultat. Dès que le mot-clé await est utilisé au sein d’une fonction, celle-ci doit avoir le mot-clé async présent dans sa signature. Ce mot-clé définit que la fonction contient une opération asynchrone et que le moteur JavaScript doit attendre sa résolution pour poursuivre l’exécution du code de la fonction.

le mot-clé async a également un autre impact : une fonction déclarée async retourne toujours une promesse.

https://academind.com/learn/javascript/callbacks-vs-promises-vs-rxjs-vs-async-awaits/
https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables