Le filtre async d’Angular partout avec @ngx-pwa/offline

Publié le

Vous connaissez le filtre async dans Angular ? Vous voudriez pouvoir l’utiliser en toutes circonstances ? Alors vous allez aimer la librairie @ngx-pwa/offline développée par notre formateur.

Nous avons traduit pour vous l’article Medium.

Rappel sur le filtre async d’Angular

Quand vous réalisez une opération asynchrone, par exemple avec un service récupérant des données via une requête HTTP :

vous devez normalement souscrire à l’Observable :

Ou vous pouvez utiliser la magie Angular :

Avec le filtre async, non seulement Angular fera la souscription pour vous, mais il se chargera aussi de stopper la souscription.

Le problème du filtre async d’Angular

Beaucoup mieux non ? Mais problème : nous avons perdu la main sur le callback d’erreur. Vous avez donc intérêt à être sûr que votre Observable va fonctionner dans tous les cas.

Malheureusement, dans une application web, et particulièrement dans une Progressive Web App (PWA), toutes les requêtes HTTP vont échouer lorsque l’utilisateur sera hors ligne. Ou le serveur pourrait être temporairement indisponible.

Si vous pouvez fournir une valeur par défaut, l’opérateur catchError de RxJS suffit à régler le problème :

Mais souvent, s’il n’y a pas de données pour votre page, il n’y aura pas de valeur par défaut à fournir et rien à afficher.

Le filtre async d’Angular partout

C’est là que la librairie @ngx-pwa/offline entre en scène ! Suivez les instructions de démarrage sur Github pour l’installer et l’initialiser, et vous pourrez ensuite utiliser un nouvel opérateur catchOffline :

S’il n’y a pas de connexion Internet ou si le serveur est indisponible, l’utilisateur sera redirigé vers une page hors ligne de votre choix (référez-vous au README sur Github pour la configuration avancée).

Les erreurs étant maintenant gérées, vous pouvez utiliser le filtre async partout !

Support

Si vous rencontrez des problèmes avec cette extension, merci d’ouvrir un ticket sur Github (poster un commentaire ici n’est pas le bon endroit pour le faire).

Découvrez notre formation Angular, animée par l’auteur de cette librairie !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.