Jaka jest różnica?
Jak widać w swoim przykładzie, główna różnica polega na poprawie czytelności kodu źródłowego. W twoim przykładzie są tylko dwie funkcje, ale wyobraź sobie, że jest ich kilkanaście? wtedy pójdzie jak
function1().function2().function3().function4()
robi się naprawdę brzydki i trudny do odczytania, zwłaszcza podczas wypełniania funkcji. Ponadto niektóre edytory, takie jak kod programu Visual Studio, nie zezwalają na więcej niż 140 linii. ale jeśli pójdzie jak podążanie.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
To drastycznie poprawia czytelność.
Jeśli nie ma różnicy, dlaczego istnieje potok funkcyjny?
Celem funkcji PIPE () jest zsumowanie wszystkich funkcji, które przyjmują i zwraca obserwowalne. Najpierw pobiera obserowalną, a następnie ta obserwowalna jest używana w całej funkcji pipe () przez każdą funkcję używaną wewnątrz niej.
Pierwsza funkcja przyjmuje obserwowalną funkcję, przetwarza ją, modyfikuje jej wartość i przechodzi do następnej funkcji, a następnie następna funkcja pobiera obserwowalne dane wyjściowe pierwszej funkcji, przetwarza je i przekazuje do następnej funkcji, a następnie kontynuuje działanie aż do wszystkich funkcji wewnątrz funkcji pipe () użyj tego obserwa- walnego, w końcu masz przetworzony obserowalny. Na koniec możesz wykonać obserwowalną funkcję subscribe (), aby wydobyć z niej wartość. Pamiętaj, że wartości w oryginalnej obserwowalnej nie ulegają zmianie. !!
Dlaczego te funkcje wymagają różnych importów?
Importy zależą od tego, gdzie funkcja jest określona w pakiecie rxjs. Tak to wygląda. Wszystkie moduły są przechowywane w folderze node_modules w Angular. import {class} z "modułu";
Weźmy następujący kod jako przykład. Właśnie napisałem to w stackblitz. Nic więc nie jest generowane automatycznie ani kopiowane z innego miejsca. Nie widzę sensu kopiowania tego, co jest napisane w dokumentacji rxjs, kiedy możesz to przeczytać i przeczytać. Zakładam, że zadałeś to pytanie, ponieważ nie zrozumiałeś dokumentacji.
- Istnieją klasy potoku, które można zaobserwować, importowane z odpowiednich modułów.
- W treści klasy użyłem funkcji Pipe (), jak widać w kodzie.
Funkcja Of () zwraca obserwowalny, który emituje liczby w kolejności, gdy jest subskrybowany.
Observable nie jest jeszcze subskrybowany.
Kiedy użyłeś tego, lubi Observable.pipe (), funkcja pipe () używa danego Observable jako wejścia.
Pierwsza funkcja, map () używa tego Observable, przetwarza go, zwraca przetworzony Observable z powrotem do funkcji pipe (),
wtedy ta przetworzona Observable jest przekazywana do następnej funkcji, jeśli istnieje,
i tak się dzieje, dopóki wszystkie funkcje nie przetworzą Observable,
na końcu funkcja pipe () zwraca wartość Observable do zmiennej, w poniższym przykładzie jej obs.
Rzecz w Observable polega na tym, że dopóki obserwator go nie subskrybuje, nie emituje żadnej wartości. Więc użyłem funkcji subscribe (), aby zasubskrybować to Observable, a potem jak tylko je zasubskrybowałem. Funkcja of () zaczyna emitować wartości, następnie są one przetwarzane przez funkcję pipe (), a na końcu otrzymujesz wynik końcowy, na przykład 1 jest pobierane z funkcji of (), 1 jest dodawane 1 w funkcji map (), i wrócił. Możesz pobrać tę wartość jako argument wewnątrz funkcji subscribe (funkcja ( argument ) {}).
Jeśli chcesz go wydrukować, użyj jako
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()pozwala mijać operatorów, których tworzysz?