Qual è la differenza?
Come vedi nel tuo esempio, la differenza principale è migliorare la leggibilità del codice sorgente. Ci sono solo due funzioni nel tuo esempio, ma immagina se ci sono una dozzina di funzioni? poi andrà come
function1().function2().function3().function4()
sta diventando davvero brutto e difficile da leggere, specialmente quando si riempiono le funzioni. Inoltre, alcuni editor come il codice di Visual Studio non consentono più di 140 righe di lunghezza. ma se va come segue.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Questo migliora drasticamente la leggibilità.
Se non c'è differenza, perché esiste la funzione pipe?
Lo scopo della funzione PIPE () è raggruppare tutte le funzioni che accettano e restituiscono osservabili. Inizialmente richiede un osservabile, quindi quell'osservabile viene utilizzato in tutta la funzione pipe () da ciascuna funzione utilizzata al suo interno.
La prima funzione prende l'osservabile, lo elabora, modifica il suo valore e passa alla funzione successiva, quindi la funzione successiva prende l'output osservabile della prima funzione, lo elabora e passa alla funzione successiva, quindi va avanti fino a tutte le funzioni all'interno della funzione pipe () usa quell'osservabile, finalmente hai l'osservabile elaborato. Alla fine è possibile eseguire l'osservabile con la funzione subscribe () per estrarne il valore. Ricorda, i valori nell'originale osservabile non vengono modificati. !!
Perché queste funzioni richiedono importazioni diverse?
Le importazioni dipendono da dove è specificata la funzione nel pacchetto rxjs. Va così. Tutti i moduli sono archiviati nella cartella node_modules in Angular. importa {class} da "modulo";
Prendiamo il codice seguente come esempio. L'ho appena scritto in Stackblitz. Quindi nulla viene generato automaticamente o copiato da qualche altra parte. Non vedo il punto di copiare quanto dichiarato nella documentazione di rxjs quando puoi andare a leggerlo anche tu. Presumo che tu abbia posto questa domanda qui, perché non hai capito la documentazione.
- Ci sono pipe, osservabili, di classi map importate dai rispettivi moduli.
- Nel corpo della classe, ho usato la funzione Pipe () come mostrato nel codice.
La funzione Of () restituisce un osservabile, che emette numeri in sequenza quando viene sottoscritto.
Observable non è ancora iscritto.
Quando l'hai usato piace Observable.pipe (), la funzione pipe () usa il dato Observable come input.
La prima funzione, map (), usa quell'Osservabile, lo elabora, restituisce l'Osservabile elaborato alla funzione pipe (),
quindi quell'Osservabile elaborato viene assegnato alla funzione successiva, se presente,
e va avanti così finché tutte le funzioni elaborano l'osservabile,
alla fine che Observable viene restituito dalla funzione pipe () a una variabile, nell'esempio seguente è obs.
Ora la cosa in Observable è, finché l'osservatore non l'ha sottoscritto, non emette alcun valore. Quindi ho usato la funzione subscribe () per iscrivermi a questo Observable, quindi non appena l'ho sottoscritto. La funzione of () inizia a emettere valori, quindi vengono elaborati tramite la funzione pipe () e alla fine si ottiene il risultato finale, ad esempio 1 viene preso dalla funzione of (), 1 viene aggiunto 1 nella funzione map (), e tornò indietro. Puoi ottenere quel valore come argomento all'interno della funzione subscribe (funzione ( argomento ) {}).
Se vuoi stamparlo, usa come
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
pipe()consente di passare gli operatori che crei?