Observable Angular Là Gì

     

Khi thao tác làm việc với Angular, chắc chắn hẳn các bạn đã nghe và liên tục nhắc đến RXJS, Observable. Nó là một phần không thể thiếu để gia công việc với những services, providers của Angular. Mặc dù nhiên, ngoài việc tạo nên các phương thức tiện lợi để xử lý các luồng dữ liệu và sự khiếu nại thì nhiều lúc nó cũng mang về cho chúng ta đôi chút rắc rối. Trong bài viết này, mình sẽ đặt ra một vài điểm cần chú ý từ chính các phương thức được thực hiện nhiều nhất với Observable là subscribe cùng unsubscribe. Về khái niệm RXJS là gì, Observable là gì thì các chúng ta cũng có thể tìm đọc các tài liệu khác, mình sẽ không nhắc lại trong nội dung bài viết này.Bạn đã xem: Observable angular là gì

subscribe và unsubscribe

Khi họ làm câu hỏi với Observable thì sẽ liên tục sử dụng cách tiến hành subscribe để theo dõi các biến đổi của tài liệu hoặc dìm về kết quả của một quá trình nào đó.

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

VD việc sử dụ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));Khi API trả về công dụng thì dữ liệu đó sẽ được log ra qua cách thức subscribe. Cùng để xong quá trình lắng nghe công dụng từ API trả về thì bọn họ sẽ sử dụng đến cách làm unsubscribe.

// ...this.http.get(apiUrl).subscribe(val => console.log(val)).unsubscribe();Nếu unsubscribe không được triệu gọi thì luồng dữ liệu đó sẽ tiến hành lưu vào bộ nhớ và theo dõi, bất cứ khi nào có sự đổi khác của tài liệu trong luồng thì cách làm subscribe sẽ được thực thi. Mặc dù nhiên, trong thực tế, 1 request lấy dữ liệu từ API thì cũng chỉ nhận được một response duy nhất, đến nên họ không thể thấy vấn đề phương thức subscribe được khởi chạy lần tiếp theo, và service HttpClient cũng tự call một cách thức để ngừng quá trình lắng nghe kết quả từ API. Vì chưng vậy, họ thường không đề nghị dùng đến cách thức unsubscribe trong những trường đúng theo này.

Vấn đề cùng với unsubscribe

Ở ví dụ như trên thì chúng ta có thể lãng quên hoặc thấy thằng unsubscribe chẳng có rất nhiều tác dụng, tuy vậy nếu trong số trường hòa hợp khác mà chúng ta cũng vứt qua câu hỏi unsubscribe một Observable thì hậu quả của nó thật khôn lường. Ngoài câu hỏi rò rỉ bộ nhớ lưu trữ do yêu cầu lưu những Observable để subscribe gây sút sút hiệu năng của ứng dụng, nó còn mang về các kết quả dở khóc dở cười cho những New Dev.

VD: giả xử chúng ta có một component A làm trách nhiệm request lên API để đưa data khi button reload của một component B được click. Component A sẽ kiểm tra khi nào button reloadcomponent B được click thông sang 1 service C. Component A rất có thể ẩn, hiện tùy vào làm việc của fan dùng.

// 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 and 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); Ở VD này, khi chúng ta click vào button reload vẫn thấy tại hành lang cửa số console log ra thông báo GET api, có nghĩa là component A sẽ lắng nghe được sự khiếu nại click của button reload vào component B với thực hiện công việc GET api.

Xem thêm: Truyen Ngon Tinh - Clip Hon Nhau Coi Het Quan Ao


*

Tuy nhiên, lúc component A bị ẩn đi thì các bạn cũng không muốn component A liên tiếp làm quá trình GET api, tuy vậy hãy test click lại button reload coi nhé:


*

Các các bạn thấy component A đã có được ẩn đi, nhưng nó vẫn liên tục thực hiện quá trình GET api, điều ấy là do họ chưa triển khai unsubscribe buttonObservable tự 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 lại thì nó sẽ tiếp tục thực hiện nay một luồng công việc mới. Do đó, quá trình GET api sẽ bị lặp lại những lần, điều đó rất bất lợi cho hiệu năng của vận dụng và cả API.


*

Nếu component A được ẩn hiện N lần, thì quá trình GET api cũng trở nên bị lặp lại N lần. Để xung khắc phục triệu chứng này, các bạn chỉ đề xuất unsubscribe buttonObservable là được.

// a.component.ts// ...ngOnInit() const subscription = this.cService.buttonObservable.subscribe(e => console.log("GET api"); // unsubscribe subscription.unsubscribe(); );// ...Nhưng cơ hội này, việc GET api đang chỉ được tiến hành một lần duy nhất mang lại dù chúng ta có click vào button reload từng nào lần đi nữa, chính vì sau khi công việc của lần click thứ nhất được thực hiện thì quá trình lắng nghe sự khiếu nại click cũng bị dừng lại do phương thức unsubscribe.

Xem thêm: Một Năm Không Nhuận Bằng Bao Nhiêu Ngày, Tuần, Tháng Và Quý Tất Cả?

Vậy nên, để phần lớn việc diễn ra xuôn sẻ, các bạn hãy unsubscribe khi 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 & 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ố cách để unsubscribe hiệu quả

Qua VD trên thì các bạn cũng đã hiểu được sự đặc trưng của việc kiểm xoát với unsubscribe các Observable một giải pháp hợp lý. Nhưng giả xử trong một component có rất nhiều các Observable cần phải unsubscribe thì các các bạn sẽ làm nạm nào để hiệu 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 làm cho như đoạn code trên thì thật là kinh hồn bạt vía đúng không? Vậy hãy cùng thử một số trong những cách sau đây nhé!

Sử dụng một mảng để quản lý các 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 nội dung bài viết này, mình hi vọng sẽ truyền đã có được cho chúng ta một chút kiến thức nho nhỏ dại và cũng là kinh nghiệm của chính bản thân mình khi thao tác làm việc với RXJS cùng Angular. Nếu các bạn có chạm chán một số trường hợp giống như như bài viết này thì hãy áp dụng những cách mà lại mình đã nói ở trên nhé! quanh đó các phương pháp để unsubscribe một Observable như trên thì cũng còn một vài bí quyết nữa, mà lại nó cũng đều có phần phức hợp và không tiện lợi cho lắm nên tôi cũng không nêu ra, cảm ơn tất cả mọi fan đã ân cần theo dõi!