Apa bedanya?
Seperti yang Anda lihat dalam contoh Anda, perbedaan utamanya adalah meningkatkan keterbacaan kode sumber. Hanya ada dua fungsi dalam contoh Anda, tetapi bayangkan jika ada selusin fungsi? maka akan seperti itu
function1().function2().function3().function4()
itu benar-benar menjadi jelek, dan sulit untuk dibaca, terutama ketika Anda mengisi di dalam fungsi. Selain itu editor tertentu seperti kode Visual Studio tidak mengizinkan lebih dari 140 panjang baris. tetapi jika seperti berikut.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Ini secara drastis meningkatkan keterbacaan.
Jika tidak ada perbedaan, mengapa pipa fungsi ada?
Tujuan dari fungsi PIPE () adalah untuk menggabungkan semua fungsi yang mengambil, dan mengembalikan yang dapat diamati. Ini mengambil observable pada awalnya, kemudian observable tersebut digunakan di seluruh fungsi pipe () oleh setiap fungsi yang digunakan di dalamnya.
Fungsi pertama mengambil yang dapat diamati, memprosesnya, mengubah nilainya, dan meneruskan ke fungsi berikutnya, kemudian fungsi berikutnya mengambil keluaran yang dapat diamati dari fungsi pertama, memprosesnya, dan meneruskan ke fungsi berikutnya, kemudian berlanjut hingga semua fungsi di dalam fungsi pipa () gunakan yang dapat diamati, akhirnya Anda memiliki pengamatan yang diproses. Pada akhirnya Anda dapat menjalankan fungsi observable dengan subscribe () untuk mengekstrak nilainya. Ingat, nilai dalam pengamatan asli tidak berubah. !!
Mengapa fungsi tersebut membutuhkan impor yang berbeda?
Impor bergantung pada tempat fungsi ditentukan dalam paket rxjs. Ini berjalan seperti ini. Semua modul disimpan dalam folder node_modules di Angular. impor {class} dari "modul";
Mari kita ambil kode berikut sebagai contoh. Saya baru saja menulisnya di stackblitz. Jadi tidak ada yang dibuat secara otomatis, atau disalin dari tempat lain. Saya tidak melihat gunanya menyalin apa yang dinyatakan dalam dokumentasi rxjs ketika Anda dapat pergi dan membacanya juga. Saya berasumsi bahwa Anda menanyakan pertanyaan ini di sini, karena Anda tidak memahami dokumentasinya.
- Ada pipa, dapat diamati, dari, kelas peta yang diimpor dari modul masing-masing.
- Di tubuh kelas, saya menggunakan fungsi Pipe () seperti yang terlihat pada kode.
Fungsi Of () mengembalikan observable, yang memancarkan angka secara berurutan saat berlangganan.
Observable belum berlangganan.
Ketika Anda menggunakannya seperti Observable.pipe (), fungsi pipe () menggunakan Observable yang diberikan sebagai input.
Fungsi pertama, fungsi map () menggunakan Observable itu, memprosesnya, mengembalikan fungsi Observable yang diproses kembali ke pipe (),
maka Observable yang telah diproses tersebut diberikan ke fungsi selanjutnya jika ada,
dan terus berlanjut hingga semua fungsi memproses Observable,
pada akhirnya Observable dikembalikan oleh fungsi pipe () ke variabel, dalam contoh berikut obs.
Sekarang hal di Observable adalah, Selama pengamat tidak berlangganan, itu tidak memancarkan nilai apa pun. Jadi saya menggunakan fungsi subscribe () untuk berlangganan Observable ini, lalu segera setelah saya berlangganan. Fungsi of () mulai memancarkan nilai, kemudian diproses melalui fungsi pipa (), dan Anda mendapatkan hasil akhir di bagian akhir, misalnya 1 diambil dari fungsi (), 1 ditambahkan 1 pada fungsi map (), dan kembali. Anda bisa mendapatkan nilai itu sebagai argumen di dalam fungsi subscribe (fungsi ( argumen ) {}).
Jika Anda ingin mencetaknya, gunakan sebagai
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()mengizinkan Anda melewati operator yang Anda buat?