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(() => {})
Xiaoke
la source

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.

cartant
la source
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.

Tsvetan Ovedenski
la source
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

Josf
la source
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'
M Abdullah
la source
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
Bjarne Gerhardt-Pedersen
la source