04. Promise et async

Qu’est-ce que l’asynchronisme ?

En Javascript/JS, le programme peut s’exécuter de manière asynchrone, c’est-à-dire qu’il s’exécute sans s’interrompre, en prenant en compte le temps nécessaire pour obtenir l’information dont il a besoin. Cela peut servir à deux choses :

• préparer au préalable le traitement d’une ou plusieurs donnée(s) dans l’attente de celle-ci, car elle peut prendre un certain temps (dépendant de la machine et de la connexion) à être retournée.
• Attendre la fin de l’instruction ou du parse (“grosse” conversion du type d’une donnée) de quelque chose avant d’exécuter ce bloc. Pour définir qu’une fonction est asynchrone en Javascript/JS, on utilise le mot réservé async :

Ex :

async function myPromise(a) {
	return a
}

Les promesses :

Il faut voir les promesses (promise en JavaScript / JS) comme une garantie faite entre les serveurs et le client de recevoir les données. Imaginons un client (client) qui veut un contrat d’assurance chez un assureur (serveur). Les deux établissent un contrat où, le client peut utiliser son assurance dès la signature, et l’assureur s’engage à le lui fournir. En cas d’erreur parmi les deux parties, le contrat est instantanément annulé ou rejeté. Elles ont plusieurs états possibles :

• pending (en attente) : état initial, la donnée est en attente de traitement
• fulfilled (tenue) : l’opération a réussi
• rejected (rompue) : l’opération a échoué.

A noter qu’une promesse est forcément asynchrone, elle représente une valeur qui sera disponible ultérieurement (de manière asynchrone).

Les mots clés :

Il y a deux méthodes pour récupérer une promesse :

• Utiliser .then (idéal pour de longs codes liés aux promesses)

  • async function monApi (API) {
     	fetch(API)
     	.then (resultat => {
     		console.log("Coucou");
     		})
     }

• Ou utiliser await (préférable pour de petits codes liés à une promesse)

  •  async function monApi (API) {
     		whatIWant = await fetch(API);
     }

La différence notable entre les deux est que .then crée une chaîne d’appel successive, tandis que await est une syntaxe moins verbeuse et plus libre pour récupérer une promesse. Une différence aussi importante est que le .then peut-être utilisé partout tandis que le await nécessite d’être dans une fonction asynchrone (async). Les deux permettent aussi de paralléliser des appels de promesse.

Parallélisme et bande passante

En réseau, la bande passante est un paramètre critique qui joue énormément sur la vitesse de réception des données, plus précisément, sur la quantité de données reçues.

Voyez-la comme un tuyau. Si vous utiliser un petit tuyau, la quantité d’eau circulant sera réduite car votre tuyau est peu large. Si vous utilisez un tuyau plus large, beaucoup plus d’eau circulera.

Si nous repartons sur notre sujet de base, paralléliser reviens à utiliser plus d’eau dans notre tuyau en utilisant le maximum de sa largeur, afin d’en transporter plus.

Le terme technique pour cette limitation de largeur de bande passante est “goulot d’étranglement”.

Exemple de parallélisation en JS

Nous aurons l’occasion d’étudier ça plus en détail au cours de l’année

const userIds = [1, 2, 3, 4, 5];
 
const promises = userIds.map(id =>
     fetch(`/users/${id}`)
          .then(response => response.json())
);
const users = await Promise.all(promises);

Manipulation asynchrone

Ces mots-clés servent à manipuler des données et fonctions asynchrones !!! Elles doivent par conséquent être contenues dans des fonctions asynchrones !!!

Gestion d’erreur :

Pour gérer les erreurs possibles dans les cas d’asynchronismes, les fonctions clés .catch() et .finally sont là pour nous aider :

• .catch() : “Attrape” l’erreur précisée en paramètre pour effectuer des actions uniques à cette erreur :

  • async function monApi (API) {
        fetch(API)
        .then(result => {console.log("Coucou")})
        .catch(error => {console.error("Une erreur est survenue")})
    }

• .finally : Permet d’exécuter ce bloc de code quel que soit le résultat (erreur ou non), cela permet notamment d’éviter de dupliquer des .then.

  • async function monApi (API) {
        fetch(API)
        .then(result => {console.log("Coucou")})
        .catch(error => {console.error("Une erreur est survenue")})
        .finally(() => {console.log("Qu'il y ait une erreur ou non, ce code s'exécute toujours")})
    }

Cas pratiques :

• Pour récupérer des données distantes (sous forme de .json, .xml, etc) avec par exemple l’API fetch().
• Si on doit convertir le retour d’un fetch() afin de formater les données à notre code (on parle alors de parse).

Pour en savoir plus…

En savoir plus

Si vous souhaitez plus de détails, je vous conseille la page suivante, qui est illustrée et assez accessible à tout niveau : MDN : Promise