Apprendre Angular en vidéos, ça te tente?
Comment utiliser de manière efficace les Observables?

Comment utiliser de manière efficace les Observables?

Nous nous retrouvons aujourd’hui pour parler d’une des bases fondamentales dans vos projets Angular. Il s’agit bien entendu des Observables. Vous en avez surement parler, nous allons décortiquer ce point dans cet article.

Cet article est quasiment indispensable pour aborder dans d’autres articles, le store Redux. Soyez bien attentif :). Prêt? Allez c’est parti!

Introduction

Comme d’habitude, on commence par la base de la base.

Qu’est ce que les Observables?

Un Observable est un objet permettant de faire le “lien” entre des publishers et des subscribers.

Tu peux nous en dire plus?

Effectivement, c’est pas très clair vu comme ça.

Pour bien comprendre, nous allons aborder les notions de synchrone et d’asynchrone.

Rappel : synchrone vs asynchrone

L’exemple le plus simple à comprendre (d’après moi) est la notion de synchrone.

Un exemple tout simple, nous voulons afficher la liste de nos amis dans la console :

let listOfFriends = ["Damien", "Thomas", "Jean-Claude Dusse"];
listOfFriends.forEach((friend: string) => {

    console.log(friend);

});
// Affiche Damien, Thomas et notre fameux Jean-Claude Dusse

Le code va s’exécuter ligne après ligne de manière synchrone.

Le Javascript n’est pas un langage asynchrone?!

Si vous avez raison, contrairement au C# ou à Java, le JavaScript va s’exécuter de manière asynchrone.

Illustrons cela par un exemple :

setTimeout(function () { console.log("Salut les copains!") }, 4000);

let listOfFriends = ["Damien", "Thomas", "Jean-Claude Dusse"];

listOfFriends.forEach((friend: string) => {
    console.log(friend);
});
//Affiche Damien, Thomas, Jean-Claude Dusse et enfin Salut les copains!

Vous l’aurez remarquer, votre code va continuer de s’exécuter et ne va pas attendre que la function setTimeout soit terminée.

C’est là ou les Observables et les Promises entrent en jeu.

Les Promises en général

Les promises comme les Observables d’ailleurs permettent d’exécuter du code de façon asynchrone.

Les promises peuvent avoir 3 états possibles :

  • Pending : En attente d’une réponse
  • Resolved : a reçu une réponse “success”
  • Rejected : a reçu une réponse “error”

Création d’une promise

Nous allons avoir un exemple de création d’une promise :

let isResolved = true;

let myPromise = new Promise((resolve, reject) => {
    if (isResolved) {
        resolve("Super ça marche");
    }
    else {
        let error = new Error("J'ai pas envie que ça marche");
        reject(error);
    }
});

Dans notre exemple cette promise sera toujours resolved. Vous pouvez executer votre code et générer une erreur et renvoyer votre promise dans un état reject.

Utiliser une promise

Nous allons voir comment utiliser la Promise que nous venons juste de créer :

myPromise
    .then((response) => {
        console.log(response);
        // Affiche Super ça marche
    })
    .catch((error) => {
    console.log(error);
    // Affiche J'ai pas envie que ça marche
});

Dés que notre promise est renvoyée dans un état resolved, le code dans la function then sera exécuté.

Si à l’inverse la promise est rejected le code dans la function catch sera exécuté.

Assez simple au final 🙂 ! Bon je vous l’avoue ces exemples sont volontairement bidons pour bien comprendre le fonctionnement.

Les Observables en général

Les objets Observables possèdent plusieurs functions mais nous verrons leurs utilisations principales dans cet article.

Comme pour les Promises, les Observables possèdent trois états (de base) :

  • Next : qui permet d’envoyer une valeur
  • Error : qui permet d’envoyer une erreur (logique!)
  • Complete : qui permet de signaler que le traitement est “fini”

Voyons un exemple concret pour mieux comprendre :

Création d’un Observable

let monObservable = new Observable((observer) => {
    let listOfFriends = ["Damien", "Thomas", "Jean-Claude Dusse"];
    listOfFriends.forEach((friend: string) => {
        observer.next(friend);
    })
    observer.complete();
});

Dans cet exemple, nous créons un objet Observable avec une function en paramètre. Nous utilisons la function next() pour notifier d’une nouvelle valeur. La function complete() pour signaler que l’Observable est fini.

Subscription à l’Observable

Nous pouvons maintenant souscrire à cet Observable fraîchement crée :

monObservable.subscribe({
    next(value) { console.log(value); },
    complete() { console.log("C'est fini!"); }
});
// Nous allons afficher Damien, Thomas, Jean-Claude Dusse et enfin C'est fini!

Je pense que cet exemple suffit pour bien comprendre les Observables dans sa version la plus simple.

La multi-Subscription

Je tiens à signaler qu’il est tout à fait possible de faire plusieurs subscriptions pour un seul Observable :

monObservable.subscribe({
    next(value) { console.log(value + 1); },
    complete() { console.log("C'est fini!1"); }
});

setTimeout(() => {
    monObservable.subscribe({
        next(value) { console.log(value + 2); },
        complete() { console.log("C'est fini!2"); }
    });
}, 2000);
// Nous allons afficher Damien1, Thomas1, Jean-Claude Dusse1 et enfin C'est fini!1
// Après 2 secondes : Damien2, Thomas2, Jean-Claude Dusse2 et enfin C'est fini!2

 

Voilà pour les exemples “théoriques” des observables.

Super, mais je vois toujours pas l’intérêt et dans quels cas ça va me servir.

C’est pour ça que nous allons passer aux utilisations concrètes.

Utilisation commune des Observables

La plupart du temps, vous utiliserez les Observables (et les Promises aussi d’ailleurs) dans le cas d’appel à une API. Notez que j’ai dis la plupart du temps :).

C’est l’heure du petit schéma explicatif!

Les Observables vont être principalement utilisés dans votre Service Angular. Quand vous effectuez un appel à une API, vous devez attendre la réponse de cette derniere.

Pour savoir quoi faire au moment où cette API va vous renvoyer, il faut pouvoir déclencher le next ou resolve de votre Observable.

Nous allons passer à un exemple de code (gourmand, ok je sors) pour mieux comprendre :

getPizzas(): Observable <Pizza[]>
{
    return this.http.get<Pizza[]>(urlAPI)
}

Votre méthode getPizzas dans PizzaService va vous renvoyer un Observable auquel vous allez pouvoir subscribe depuis vos différents composants. Bon allez, je vous donne un exemple de subscription dans vos composants.

 

getPizzas(): void {
    this.pizzaService.getPizzas().subscribe(pizzas => this.pizzas = pizzas);
}

Vous pouvez ainsi récupérez vos pizzas dans votre composant à l’aide des Observables. C’est également possible d’utiliser des Promises pour faire la même manipulation. Je conseille quand même d’utiliser les Observables.

Tu nous conseilles d’utiliser les Observables.. Ok mais pourquoi exactement?

J’allais y venir sur la différence entre les Observables et les Promises.

Observables vs Promises

La différence entre les Observables et les Promises se résument en trois points.

Je t’appelle quand je veux

Les Observables sont appelés au moment ou quelqu’un subscribe à ce dernier. Contrairement à cela, les Promises sont appelées directement à leur création. On gâche en quelque sorte des ressources en utilisant des Promises.. C’est un peu le même principe que l’injection de dépendance (lazy)

Stop!

Il est possible de cancel un Observable qui est en cours d’execution. Avec une Promise, c’est impossible. Une fois que la Promise est lancée, soit elle renvoie un success (then), soit elle renvoie une erreur (catch).

On peut gérer un cancel d’un Observable avec la function de callback onCancel().

Support RxJs

On peut utiliser avec les Observable, tous les opérateurs liés à la lib RxJs (map, filter, reduce, …).

Nous allons voir par la suite comme c’est pratique et comment les exploiter!

Conclusion

Bravo, vous êtes arrivés à la fin de cet article. Vous savez l’essentiel sur les Observables qui sont très pratiques et indispensables pour aborder la lib RxJs sereinement.

Comme d’habitude vous pouvez poster vos questions en commentaire.

Portez-vous bien jusqu’au prochain article.

Partagez, si vous aimez

2 thoughts on “Comment utiliser de manière efficace les Observables?

    1. Je n’ai pas l’impression d’avoir utiliser JQuery dans mes exemples. Sinon n’hésites pas d’importer la lib JQuery dans ton code.

      npm install jquery — save

      “scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]

      dans angular-cli.json

      import * as $ from ‘jquery’; 

      dans tes composants

      Après je ne te le recommande pas 🙂

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

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