Operador 'of' vs 'from'

153

A única diferença entre Observable.ofe Observable.fromo formato dos argumentos? Como o Function.prototype.calle Function.prototype.apply?

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

Respostas:

115

Nem tanto. Ao passar uma matriz para Observable.from, a única diferença entre ela e Observable.ofa maneira como os argumentos são passados.

No entanto, Observable.fromaceitará um argumento que é

um objeto assinável, um Promise, um Observable, um Array, um iterável ou um objeto do tipo Array a ser convertido

Não há comportamento semelhante para Observable.of- que sempre aceita apenas valores e não realiza conversão.

cartant
fonte
193

É importante observar a diferença entre ofe fromao passar uma estrutura semelhante a uma matriz (incluindo cadeias):

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

imprimiria toda a matriz de uma só vez.

Por outro lado,

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

imprime os elementos 1 por 1.

Para strings, o comportamento é o mesmo, mas no nível do personagem.

Tsvetan Ovedenski
fonte
E se Observable.of (1, 2, 3) .subscribe (x => console.log (x));
Xiaoke
1
@xiaoke Então certamente são 3 emissões separadas (1, depois 2 e depois 3).
Tsvetan Ovedenski
16

Outro fato interessante é Observable.of ([]) será uma matriz vazia quando você se inscrever nela. Onde, quando você assina o Observable.from ([]), não recebe nenhum valor.

Isso é importante quando você faz uma operação consecutiva com o switchmap.

Ex: no exemplo abaixo, estou salvando um trabalho, sites e comentários como um fluxo.

.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())
....

se não houver site para salvar, ou seja; data.length = 0 na seção addSite, o código acima está retornando Observable.of ([]) e depois salva os comentários. Mas se você substituí-lo por Observable.from ([]), os métodos seguintes não serão chamados.

rxfiddle

Josf
fonte
6

Diferença de uma linha:

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

from : emite os itens um a um da matriz. Por exemplo

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

of : Emite toda a matriz de uma vez. Por exemplo

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

NOTA: do operador pode se comportar a partir do operador com o operador espalhado

 of(...fruits).subscribe(console.log) //  'orange','apple','banana'
M Abdullah
fonte
0

from: Crie observável a partir de matriz, promessa ou iterável. Leva apenas um valor. Para matrizes, iterables e strings, todos os valores contidos serão emitidos como uma sequência

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

of: Criar observável com quantidades variáveis ​​de valores, emitir valores em sequência, mas matrizes como valor único

const values = [1, 2, 3];
of(values, 'hi', 4, 5); // [1, 2, 3] ... 'hi' ... 4 ... 5
Bjarne Gerhardt-Pedersen
fonte