Je travaille toujours sur mon side project sur lequel je descends dans la mine .. coté front. Dans ce contexte, j’ai le besoin (ou bien j’ai décidé d’avoir le besoin 😀 ) de faire plusieurs requêtes Http en parallèle depuis le navigateur.
Après quelques recherches j’ai trouvé la librairie Async, initialement destinée à tourner coté serveur node et qui a trouvé sa place coté front, dans le navigateur.

Installation

Avant de rentrer dans le détail, il faut la rendre disponible dans le projet. Sur la partie, installation, c’est trivial à partir du moment ou notre projet est construit sur une base NPM ou YARN.

[pastacode lang=”javascript” manual=”yarn%20add%20async%20%E2%80%94save” message=”” highlight=”” provider=”manual”/]

Une petite subtilité cependant pour les utilisateurs du framework VueJs. En effet, il ne semble pas y avoir d’intégration avec le framework. Du coup, pour rendre disponible la lib dans tous les composants de notre application, il faut rajouter dans le fichier js principal la ligne suivante :

[pastacode lang=”javascript” manual=”Object.defineProperty(Vue.prototype%2C%20’%24async’%2C%20%7B%20value%3A%20async%20%7D)%3B” message=”” highlight=”” provider=”manual”/]

qui rendra accessible la lib de manière standard dans la contexte de VueJs :

[pastacode lang=”javascript” manual=”this.%24async.*” message=”” highlight=”” provider=”manual”/]

(On a l’impression que ça fait 20ans que je fais du dev front, ce n’est qu’une illusion.. XD)

La lib

Maintenant qu’elle est installée, on va commencer à pouvoir regarder sous le capot. Déjà que propose cette librairie ?
Async propose un ensemble fonctions (~70) permettant de travailler sur une collection d’éléments. Chaque élément est traité de manière asynchrone/parallèle.
Le traitement a appliqué sur chaque élément est défini par une fonction avec un seul paramètre.
Il faut fournir une fonction qui permettra de récupérer, soit les potentielles erreurs, soit le résultat de chacun des traitements sous forme d’un tableau.
Ce callback sera appelé une seule fois lorsque tous les traitements seront appliqués.
Ca c’est le fonctionnement général.

L’ensemble des fonctions disponibles se découpe en 3 catégories :

  • Traitement d’une collection de manière globale
  • Gestion du flow d’exécution
  • Un ensemble de fonctions utilitaires.

Traitement d’une collection de manière globale :

Ces fonctions traites les ensembles entièrement. par exemple, on retrouve les fonctions suivantes :

  • concat : Elle va appliquer un traitement à l’ensemble des éléments de la collection et concaténer les résultats.
  • map : Cette fonction va permettre d’appliquer un traitement sur l’ensemble des éléments et retourner sous forme de tableau les résultats.
  • every : Cette fonction permet de vérifier si tous éléments satisfont un test.
  • etc..

La liste est loin d’être exhaustive, mais ce qu’il faut garder à l’esprit, c’est que le traitement s’applique à l’ensemble des éléments et de manière asynchrone.

Gestion du flow d’exécution

Ces fonctions permettent de gérer le flow d’exécution. C’est à dire que le traitement et le résultat ne sont plus globaux.
Dans ce contexte, la fonction se traitement sera appliquée à chaque élément, rien de nouveau ici, par contre, le callback de résultat sera appelé à la fin de chaque traitement de manière unitaire.

L’idée reste la même, mais l’approche est différente.

Un exemple de fonction caractéristique est la fonction applyEach, qui va s’attacher à traiter chaque élément et appeler le callback la fin de chaque traitement.

La liste est également longue, je vous invite à consulter la documentation pour plus de détails.

Un ensemble de fonctions utilitaires

Cette partie assez classique regroupe un ensemble de fonctions utilitaires.
Une fonction intéressante : asyncify qui permet de rendre une fonction asynchrone. Elle fournira le résultat à un callback qui vous aurez fourni au préalable.

De la même manière, je vous invite à consulter la documentation pour avoir toutes les fonctions ainsi que les détails.

Enfin

L’expérience utilisateur est au centre des applications que l’on développe aujourd’hui. L’ergonomie visuelle est d’une importance capitale pour l’UX mais pas que.
Le temps passé pour obtenir une information est un enjeu très important.
Cette librairie peut être une solution pour adresser cette dernière problématique. Ce ne sera surement pas la silver bullet, mais l’avoir dans sa boite à outils peut être intéressante.

Il n’est pas prévu que la version Ah six sorte.. 😉

Async