Quelle est la différence ? Comme vous le voyez dans votre exemple, la principale différence consiste à améliorer la lisibilité du code source. Il n'y a que deux fonctions dans votre exemple, mais imaginez qu'il y en ait une douzaine ? alors cela donnera
function1().function2().function3().function4()
ça devient vraiment moche et difficile à lire, surtout quand on remplit l'intérieur des fonctions. En plus de cela, certains éditeurs, comme Visual Studio code, ne permettent pas de dépasser 140 lignes.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Cela améliore considérablement la lisibilité.
S'il n'y a pas de différence, pourquoi le tuyau de fonction existe-t-il ? Le but de la fonction PIPE() est de regrouper toutes les fonctions qui prennent, et retournent l'observable. Elle prend une observable au départ, puis cette observable est utilisée tout au long de la fonction pipe() par chaque fonction utilisée à l'intérieur de celle-ci.
La première fonction prend l'observable, le traite, modifie sa valeur et le passe à la fonction suivante, puis la fonction suivante prend l'observable de sortie de la première fonction, le traite et le passe à la fonction suivante, et ainsi de suite jusqu'à ce que toutes les fonctions à l'intérieur de la fonction pipe() utilisent cet observable, et enfin vous avez l'observable traité. À la fin, vous pouvez exécuter l'observable avec la fonction subscribe() pour en extraire la valeur. N'oubliez pas que les valeurs de l'observable d'origine ne sont pas modifiées !
Pourquoi ces fonctions ont-elles besoin d'importations différentes ? Les importations dépendent de l'endroit où la fonction est spécifiée dans le paquet rxjs. Cela se passe comme suit. Tous les modules sont stockés dans le dossier node_modules dans Angular. import { class } from "module" ;
Prenons le code suivant comme exemple. Je viens de l'écrire dans stackblitz. Rien n'est donc généré automatiquement, ni copié depuis un autre endroit. Je ne vois pas l'intérêt de copier ce qui est indiqué dans la documentation rxjs quand on peut aller la lire aussi. Je suppose que vous avez posé cette question ici, parce que vous n'avez pas compris la documentation.
-
Il existe des classes pipe, observable, of, map importées depuis les modules respectifs.
-
Dans le corps de la classe, j'ai utilisé la fonction Pipe() comme on le voit dans le code.
-
La fonction Of() renvoie un observable, à savoir émet des nombres en séquence lorsqu'elle est souscrite.
-
Observable n'est pas encore inscrit.
-
Lorsque vous l'utilisez comme Observable.pipe(), la fonction pipe() utilise l'Observable donné comme entrée.
-
La première fonction, la fonction map(), utilise cet Observable, le traite et renvoie l'Observable traité à la fonction pipe(),
-
alors cet Observable traité est donné à la fonction suivante s'il y en a une,
-
et cela continue ainsi jusqu'à ce que toutes les fonctions traitent l'Observable,
-
à la fin, cet Observable est retourné par la fonction pipe() vers une variable, dans l'exemple suivant son obs.
Maintenant, le truc avec l'Observable, c'est que tant que l'observateur n'y a pas souscrit, il n'émet aucune valeur. Donc j'ai utilisé la fonction subscribe() pour souscrire à cet Observable, puis dès que je l'ai souscrit. La fonction of() commence à émettre des valeurs, puis elles sont traitées par la fonction pipe(), et vous obtenez le résultat final à la fin, par exemple 1 est pris de la fonction of(), 1 est ajouté 1 dans la fonction map(), et renvoyé. Vous pouvez obtenir cette valeur comme argument à l'intérieur de la fonction subscribe() ( argument ) {} ) fonction.
Si vous voulez l'imprimer, alors utilisez comme
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
1 votes
J'allais dire que c'est pour les opérateurs personnalisés, non natifs, mais je ne sais même pas si c'est exact. Est-ce que
pipe()vous permet de passer les opérateurs que vous créez ?