Observable Angular Là Gì

lúc thao tác với Angular, có lẽ rằng chúng ta sẽ nghe và thường xuyên nhắc tới RXJS, Observable. Nó là một trong những phần luôn luôn phải có để làm việc với những services, providers của Angular. Tuy nhiên, quanh đó việc tạo thành những cách làm tiện lợi nhằm giải pháp xử lý những luồng dữ liệu cùng sự khiếu nại thì nhiều khi nó cũng đem đến đến họ tí chút rắc rối. Trong nội dung bài viết này, mình sẽ đặt ra một vài ba vấn đề cần để ý từ thiết yếu những cách tiến hành được thực hiện những độc nhất vô nhị với Observable là subscribe cùng unsubscribe. Về có mang RXJS là gì, Observable là gì thì những bạn có thể tra cứu phát âm những tư liệu không giống, mình sẽ không còn nói lại trong nội dung bài viết này.

Bạn đang xem: Observable angular là gì

subscribe với unsubscribe

lúc họ thao tác làm việc với Observable thì đã liên tục áp dụng cách tiến hành subscribe nhằm theo dõi những thay đổi của dữ liệu hoặc nhận về tác dụng của một quá trình nào kia.

VD việc áp dụng cùng với HttpClient service của Angular:

import HttpClient from "
angular/common/http";// ...// inject httpconstructor(private http: HttpClient) // ...// use httpconst apiUrl = "http://abc.com/def";this.http.get(apiUrl).subscribe(val => console.log(val));lúc API trả về hiệu quả thì tài liệu kia sẽ tiến hành log ra qua cách tiến hành subscribe. Và nhằm ngừng quá trình lắng nghe tác dụng từ API trả về thì chúng ta đã dùng cho cách thức unsubscribe.

// ...this.http.get(apiUrl).subscribe(val => console.log(val)).unsubscribe();Nếu unsubscribe không được triệu call thì luồng dữ liệu kia sẽ tiến hành lưu lại vào bộ lưu trữ và theo dõi và quan sát, bất kể lúc nào bao gồm sự biến hóa của dữ liệu trong luồng thì phương thức subscribe sẽ được thực thi. Tuy nhiên, trong thực tế, 1 request lấy tài liệu từ API thì cũng chỉ thừa nhận được một response tuyệt nhất, do đó chúng ta bắt buộc thấy bài toán cách tiến hành subscribe được khởi chạy lần tiếp sau, và service HttpClient cũng tự call một phương thức để chấm dứt quá trình lắng tai công dụng trường đoản cú API. Bởi vậy, họ hay không đề nghị cần sử dụng mang đến cách thức unsubscribe trong các ngôi trường hòa hợp này.

Vấn đề với unsubscribe

Tại ví dụ trên thì chúng ta có thể lãng quên hoặc thấy thằng unsubscribe chẳng có không ít tác dụng, nhưng nếu trong các ngôi trường hòa hợp khác nhưng mà chúng ta cũng bỏ lỡ bài toán unsubscribe một Observable thì kết quả của chính nó thiệt khôn lường. Ngoài việc nhỉ bộ nhớ lưu trữ do đề nghị lưu lại các Observable để subscribe gây sút sút tính năng của áp dụng, nó còn đem lại những tác dụng dsinh hoạt khóc dnghỉ ngơi mỉm cười cho những New Dev.

VD: Giả xử chúng ta có một component A làm cho trọng trách request lên API để mang data Lúc button reload của một component B được clichồng. Component A đã chất vấn khi nào button reload làm việc component B được clichồng thông qua một service C. Component A hoàn toàn có thể ẩn, hiện nay tùy thuộc vào làm việc của người tiêu dùng.

Xem thêm: Vì Sao Bạn Thích Học Tiếng Anh Bằng Tiếng Anh Có Dịch Hay Nhất

// app.component.tsimport Component from "
Component( selector: "my-app", template: `Toggle showA ? "component A is display" : "component A is hidden"

`)export class AppComponent showA = true;

// c.service.tsimport Injectable from "
Injectable()export class CService buttonSubject: Subjectany> = new Subject(); buttonObservable = this.buttonSubject.asObservable();// a.component.tsimport Component, OnInit from "
Component( selector: "a-component", template: `GET và show data!`)export class AComponent implements OnInit constructor(private cService: CService) ngOnInit() this.cService.buttonObservable.subscribe(e => console.log("GET api"); ); // b.component.tsimport Component from "
Component( selector: "b-component", template: "Reload")export class BComponent constructor(private cService: CService) handleButtonClick(e) this.cService.buttonSubject.next(e); Tại VD này, lúc chúng ta click vào button reload đang thấy trên cửa sổ console log ra thông báo GET api, có nghĩa là component A đã lắng nghe được sự kiện click của button reload vào component B và thực hiện các bước GET api.

*

Tuy nhiên, Khi component A bị ẩn đi thì các bạn cũng không hề mong muốn component A liên tục làm công việc GET api, dẫu vậy hãy thử clichồng lại button reload coi nhé:

*

Các bạn thấy component A đã được ẩn đi, tuy thế nó vẫn tiếp tục tiến hành công việc GET api, điều đó là vì chúng ta không tiến hành unsubscribe buttonObservable từ bỏ service C.

// a.component.ts// ...ngOnInit() this.cService.buttonObservable.subscribe(e => console.log("GET api"); ); // No unsubscribe// ...Và Lúc component A được hiển thị quay trở về thì nó đã liên tiếp tiến hành một luồng quá trình bắt đầu. Do đó, các bước GET api sẽ bị tái diễn các lần, vấn đề đó cực kỳ có hại cho hiệu năng của ứng dụng cùng cả API.

*

Nếu component A được ẩn hiện nay N lần, thì các bước GET api cũng trở nên bị tái diễn N lần. Để khắc phục triệu chứng này, chúng ta chỉ cần unsubscribe buttonObservable là được.

// a.component.ts// ...ngOnInit() const subscription = this.cService.buttonObservable.subscribe(e => console.log("GET api"); // unsubscribe subscription.unsubscribe(); );// ...Nhưng lúc này, bài toán GET api đã chỉ được thực hiện một lần độc nhất vô nhị cho dù chúng ta có cliông chồng vào button reload từng nào lần đi nữa, bởi vì sau khoản thời gian quá trình của lần clichồng đầu tiên được triển khai thì quá trình lắng tai sự khiếu nại cliông chồng cũng trở thành tạm dừng bởi cách tiến hành unsubscribe.

Vậy buộc phải, để số đông Việc ra mắt xuôn sẻ, chúng ta hãy unsubscribe lúc nhưng mà component được gỡ khỏi DOM thông qua lifecycle hook ngOnDestroy của Angular.

// a.component.tsimport Component, OnInit, OnDestroy from "
Component( selector: "a-component", template: `GET và show data!`)export class AComponent implements OnInit, OnDestroy subscription: SubscriptionLike; constructor(private cService: CService) ngOnInit() this.subscription = this.cService.buttonObservable.subscribe(e => console.log("GET api"); ); ngOnDestroy() // unsubscribe if (this.subscription) this.subscription.unsubscribe();

Một số phương pháp để unsubscribe hiệu quả

Qua VD bên trên thì chúng ta cũng đã hiểu được sự quan trọng đặc biệt của việc kiểm xoát cùng unsubscribe các Observable một cách phù hợp. Nhưng đưa xử vào một component gồm vô số những Observable cần được unsubscribe thì những bạn sẽ làm cố như thế nào để kết quả nhất?

ngOnInit() this.subscription1 = request1.subscribe(...); this.subscription2 = request2.subscribe(...); // ... this.subscriptionX = requestX.subscribe(...);ngOnDestroy() if (this.subscription1) this.subscription1.unsubscribe(); if (this.subscription2) this.subscription2.unsubscribe(); // ... if (this.subscriptionX) this.subscriptionX.unsubscribe(); Nếu có tác dụng như đoạn code trên thì thật là cực shock đúng không? Vậy hãy cùng demo một số giải pháp tiếp sau đây nhé!

Sử dụng một mảng nhằm làm chủ những subscriptions

subscriptions: Subscription<> = <>;ngOnInit() this.subscriptions.push(request.subscribe(...)); this.subscriptions.push(request.subscribe(...)); this.subscriptions.push(request.subscribe(...));ngOnDestroy() this.subscriptions.forEach((subscription) => subscription.unsubscribe());

Sử dụng Subscription add

subscriptions: Subscription = new Subscription();ngOnInit() this.subscriptions.add(request.subscribe(...)); this.subscriptions.add(request.subscribe(...)); this.subscriptions.add(request.subscribe(...));ngOnDestroy() this.subscriptions.unsubscribe();

Sử dụng takeUntil operators

import takeUntil from "rxjs/operators";// ...destroy: ReplaySubjectany> = new ReplaySubjectany>(1);ngOnInit() request.pipe(takeUntil(this.destroy)).subscribe(); request.pipe(takeUntil(this.destroy)).subscribe(); request.pipe(takeUntil(this.destroy)).subscribe();ngOnDestroy() this.destroy.next(null);

Lời kết

Qua bài viết này, bản thân hi vọng đang truyền dành được cho chúng ta một chút kỹ năng và kiến thức nho nhỏ tuổi và cũng là tay nghề của mình khi thao tác với RXJS cùng Angular. Nếu chúng ta có chạm mặt một trong những trường vừa lòng tương tự như nội dung bài viết này thì nên áp dụng các bí quyết mà tôi đã nói trên nhé! Ngoài những cách để unsubscribe một Observable nhỏng bên trên thì cũng còn một vài ba giải pháp nữa, nhưng mà nó cũng có phần tinh vi và ko tiện nghi mang đến lắm đề xuất mình cũng ko nêu ra, cảm ơn tất cả gần như người đã quyên tâm theo dõi!

Leave a Reply

Your email address will not be published. Required fields are marked *