web-dev-qa-db-fra.com

Quand utiliser asObservable () dans rxjs?

Je me demande à quoi sert asObservable :

Selon les documents:

Une séquence observable qui cache l'identité de la séquence source.

Mais pourquoi auriez-vous besoin de cacher la séquence?

rxjsrxjs5
53
born2net

Quand utiliser Subject.prototype.asObservable ()

Le but de ceci est d'empêcher toute fuite du "côté observateur" du sujet hors d'un API. Essentiellement, pour éviter une fuite d’abstraction lorsque vous ne voulez pas que les gens puissent "passer" au-delà de l’observable résultant.

Exemple

(NOTE: Ce n'est vraiment pas comment vous devriez transformer une source de données comme celle-ci en un observable, mais utilisez plutôt le constructeur new Observable, Voir ci-dessous).

const myAPI = {
  getData: () => {
    const subject = new Subject();
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subject.next({ type: 'message', data });
    source.onOtherMessage = (data) => subject.next({ type: 'othermessage', data });
    return subject.asObservable();
  }
};

Maintenant, lorsque quelqu'un obtient le résultat observable de myAPI.getData(), il ne peut pas utiliser next dans le résultat:

const result = myAPI.getData();
result.next('LOL hax!'); // throws an error because `next` doesn't exist

Vous devriez généralement utiliser new Observable(), bien que

Dans l'exemple ci-dessus, nous créons probablement quelque chose que nous ne voulions pas. D'une part, getData() n'est pas paresseux, comme la plupart des observables, il va créer immédiatement la source de données sous-jacente SomeWeirdDataSource (et probablement quelques effets secondaires). Cela signifie également que si vous retry ou repeat l'observable résultant, cela ne fonctionnera pas comme vous le pensez.

Il est préférable d'encapsuler la création de votre source de données dans votre observable comme ceci:

const myAPI = {
  getData: () => return new Observable(subscriber => {
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subject.next({ type: 'message', data });
    source.onOtherMessage = (data) => subject.next({ type: 'othermessage', data });
    return () => {
      // Even better, now we can tear down the data source for cancellation!
      source.destroy();
    };
  });
}

Avec le code ci-dessus, tout comportement, y compris le rendre "non paresseux", peut être composé au-dessus de l'observable à l'aide des opérateurs existants de RxJS.

145
Ben Lesh

Un Subject peut agir à la fois comme un observer et un observable.

Un Obervable a 2 méthodes.

  • s'abonner
  • se désabonner

Chaque fois que vous vous abonnez à un observable, vous obtenez un observer qui a suivant , erreur et complète méthodes dessus.

Vous devez masquer la séquence car vous ne souhaitez pas que la source de flux soit accessible au public dans tous les composants. Vous pouvez vous référer à l'exemple de @BenLesh, Pour les mêmes.

P.S. : La première fois que je suis passé par Javascript réactif, je n’étais pas capable de comprendre asObservable. Parce que je devais m'assurer de bien comprendre les bases et ensuite aller pour asObservable. :)

1
HV Sharma