Opérateur 'of' vs 'from'


154

La seule différence entre Observable.ofet Observable.fromle format des arguments? Comme le Function.prototype.callet Function.prototype.apply?

Observable.of(1,2,3).subscribe(() => {})
Observable.from([1,2,3]).subscribe(() => {})

Réponses:


115

Pas assez. Lors du passage d'un tableau à Observable.from, la seule différence entre lui et Observable.ofest la façon dont les arguments sont passés.

Cependant, Observable.fromacceptera un argument qui est

un objet pouvant être abonné, une promesse, un objet de type Observable, un tableau, un objet itérable ou de type tableau à convertir

Il n'y a pas de comportement similaire pour Observable.of- qui n'accepte toujours que des valeurs et n'effectue aucune conversion.


193

Il est important de noter la différence entre ofet fromlors du passage d'une structure de type tableau (y compris des chaînes):

Observable.of([1, 2, 3]).subscribe(x => console.log(x));

imprimerait le tableau entier à la fois.

D'autre part,

Observable.from([1, 2, 3]).subscribe(x => console.log(x));

imprime les éléments 1 par 1.

Pour les chaînes, le comportement est le même, mais au niveau des caractères.


Et si Observable.of (1, 2, 3) .subscribe (x => console.log (x));
xiaoke le

1
@xiaoke Alors c'est sûrement 3 émissions séparées (1, puis 2, puis 3).
Tsvetan Ovedenski

16

Un autre fait intéressant est Observable.of ([]) sera un tableau vide lorsque vous y souscrivez. Où, comme lorsque vous vous abonnez à Observable.from ([]), vous n'obtiendrez aucune valeur.

Ceci est important lorsque vous effectuez une opération consécutive avec switchmap.

Ex: Dans l'exemple ci-dessous, j'enregistre un travail, puis des sites, puis des commentaires sous forme de flux.

.do((data) => {
            this.jobService.save$.next(this.job.id);
        })
        .switchMap(() => this.jobService.addSites(this.job.id, this.sites)
            .flatMap((data) => {
                if (data.length > 0) {
                    // get observables for saving
                    return Observable.forkJoin(jobSiteObservables);
                } else {
                    **return Observable.of([]);**
                }
            })).do((result) => {
            // ..
        })
        .switchMap(() => this.saveComments())
....

s'il n'y a pas de site à enregistrer, c'est à dire; data.length = 0 dans la section addSite, le code ci-dessus renvoie Observable.of ([]) puis va enregistrer les commentaires. Mais si vous le remplacez par Observable.from ([]), les méthodes suivantes ne seront pas appelées.

rxfiddle


6

Différence d'une ligne:

       let fruits = ['orange','apple','banana']

from : émet les éléments un par un de array. Par exemple

    from(fruits).subscribe(console.log) // 'orange','apple','banana'

of : émet tout le tableau en une seule fois. Par exemple

 of(fruits).subscribe(console.log) //  ['orange','apple','banana']

REMARQUE: de l' opérateur peut se comporter comme de l' opérateur avec l' opérateur de diffusion

 of(...fruits).subscribe(console.log) //  'orange','apple','banana'


0

from: Créez un observable à partir d'un tableau, d'une promesse ou d'une itération. Prend une seule valeur. Pour les tableaux, les itérables et les chaînes, toutes les valeurs contenues seront émises sous forme de séquence

const values = [1, 2, 3];
from(values); // 1 ... 2 ... 3

of: Créez des observables avec des quantités variables de valeurs, émettez des valeurs dans l'ordre, mais des tableaux en tant que valeur unique

const values = [1, 2, 3];
of(values, 'hi', 4, 5); // [1, 2, 3] ... 'hi' ... 4 ... 5
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.