Sự khác biệt là gì?
Như bạn thấy trong ví dụ của mình, điểm khác biệt chính là cải thiện khả năng đọc của mã nguồn. Chỉ có hai hàm trong ví dụ của bạn, nhưng hãy tưởng tượng nếu có hàng tá hàm? sau đó nó sẽ diễn ra như thế nào
function1().function2().function3().function4()
nó thực sự trở nên xấu xí và khó đọc, đặc biệt là khi bạn điền vào bên trong các hàm. Trên hết, một số trình soạn thảo nhất định như mã Visual Studio không cho phép độ dài dòng hơn 140. nhưng nếu nó diễn ra như sau.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Điều này cải thiện đáng kể khả năng đọc.
Nếu không có sự khác biệt, tại sao đường ống chức năng tồn tại?
Mục đích của hàm PIPE () là tổng hợp tất cả các hàm sử dụng và trả về có thể quan sát được. Ban đầu cần quan sát, sau đó có thể quan sát được sử dụng trong suốt hàm pipe () bởi từng hàm được sử dụng bên trong nó.
Hàm đầu tiên nhận chức năng có thể quan sát, xử lý nó, sửa đổi giá trị của nó và chuyển đến chức năng tiếp theo, sau đó hàm tiếp theo nhận đầu ra có thể quan sát được của chức năng đầu tiên, xử lý nó và chuyển cho chức năng tiếp theo, sau đó nó tiếp tục cho đến khi tất cả các chức năng bên trong của hàm pipe () sử dụng có thể quan sát được, cuối cùng bạn có thể quan sát đã xử lý. Cuối cùng, bạn có thể thực thi hàm subscribe () có thể quan sát được để trích xuất giá trị của nó. Hãy nhớ rằng, các giá trị trong bản gốc có thể quan sát được không thay đổi. !!
Tại sao những chức năng đó cần nhập khẩu khác nhau?
Nhập phụ thuộc vào nơi hàm được chỉ định trong gói rxjs. Nó diễn ra như thế này. Tất cả các mô-đun được lưu trữ trong thư mục node_modules trong Angular. nhập {class} từ "mô-đun";
Hãy lấy đoạn mã sau làm ví dụ. Tôi vừa viết nó trong stackblitz. Vì vậy, không có gì được tạo tự động hoặc sao chép từ một nơi khác. Tôi không thấy có ích khi sao chép những gì đã nêu trong tài liệu rxjs khi bạn cũng có thể đọc và đọc nó. Tôi cho rằng bạn đã hỏi câu hỏi này ở đây, bởi vì bạn không hiểu tài liệu.
- Có các lớp bản đồ dạng ống, có thể quan sát được, được nhập từ các mô-đun tương ứng.
- Trong phần nội dung của lớp, tôi đã sử dụng hàm Pipe () như đã thấy trong mã.
Hàm Of () trả về một hàm có thể quan sát, phát ra các số theo thứ tự khi nó được đăng ký.
Có thể quan sát chưa được đăng ký.
Khi bạn sử dụng nó như Observable.pipe (), hàm pipe () sử dụng Observable đã cho làm đầu vào.
Hàm đầu tiên, hàm map () sử dụng Observable đó, xử lý nó, trả lại Observable đã xử lý trở lại hàm pipe (),
sau đó, có thể quan sát được đã xử lý được cấp cho hàm tiếp theo nếu có,
và nó tiếp tục như vậy cho đến khi tất cả các chức năng xử lý Observable,
ở cuối, Observable được trả về bởi hàm pipe () thành một biến, trong ví dụ sau đây là obs của nó.
Bây giờ điều trong Observable là, miễn là người quan sát không đăng ký nó, nó sẽ không phát ra bất kỳ giá trị nào. Vì vậy, tôi đã sử dụng hàm subscribe () để đăng ký Observable này, sau đó ngay sau khi tôi đăng ký nó. Hàm of () bắt đầu tạo ra các giá trị, sau đó chúng được xử lý thông qua hàm pipe () và bạn nhận được kết quả cuối cùng ở cuối, ví dụ: 1 được lấy từ hàm of (), 1 được thêm 1 vào hàm map (), và quay trở lại. Bạn có thể lấy giá trị đó làm đối số bên trong hàm subscribe (function ( đối số ) {}).
Nếu bạn muốn in nó, hãy sử dụng như
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()cho phép bạn chuyển các toán tử mà bạn tạo không?