Observable hoạt động như thế nào trong Angular?

0
49

Nếu bạn muốn sử dụng Angular nhưng cảm thấy hơi sợ hãi bởi thuật ngữ Observables thì hãy tham khảo những thông tin tổng hợp sau đây.  Bài tổng hợp dưới đây sẽ cho bạn biết observable hoạt động như thế nào? tại sao phải sử dụng observable,… 

Observable là gì?

Đây là nghi vấn được đặt ra của không ít người. Thuật ngữ này thực sự khó để định nghĩa. Observable được dùng để chỉ các hàm đưa ra giá trị. Các đối tượng (object) được gọi là observers xác định các hàm gọi lại  như next(), error() và complete(). Các đối tượng observers này sau đó được chuyển làm đối số cho hàm observable. Hàm observable gọi các phương thức của observers dựa trên một hành vi nhất định (HTTP AJAX request, sự kiện,…). Điều này cho phép observers “lắng nghe” các thay đổi trạng thái do các hàm observable phát ra.

 

 

Thực tế cho thấy cách giải thích này vẫn rất mơ hồ. Bạn có thể tưởng tượng dễ hiểu theo cách sau. Khi bạn bật chế độ observable với một cô bạn mà mình thích thì bạn sẽ bị cô ấy ảnh hưởng. Người ta ốm đau bạn, đi muộn, mặc quần áo màu gì bạn cũng đều sẽ biết,… Lâu dần nó sẽ hình thành trong bạn những phản xạ vô điều kiện về cô gái đó.

Observable Angular là gì?

Sau khi đã biết đượcObservable là gì thì chúng ta hãy tìm hiểu Observable Angular là gì.

Đầu tiên chúng ta cần biết Angular. Đây thực chất là một JavaScript framework chuyên dụng cho việc viết giao diện web – chính là front end đấy. Còn Observable Angular chính là Observable được sử dụng trong Angular.

Một tính năng mới thú vị được sử dụng với Angular là Observable. Đây không phải là một tính năng cụ thể của Angular. Mà nó là một tiêu chuẩn được đề xuất để quản lý dữ liệu không đồng bộ sẽ được đưa vào bản phát hành của ES7. Các Observable mở ra một kênh liên lạc liên tục trong đó nhiều giá trị dữ liệu có thể được phát ra theo thời gian. Từ đó, chúng ta có được một mô hình xử lý dữ liệu bằng cách sử dụng các hoạt động giống như mảng để phân tích cú pháp, sửa đổi và duy trì dữ liệu. Angular sử dụng rộng rãi các Observable – bạn sẽ thấy chúng trong dịch vụ HTTP và hệ thống sự kiện.

Ngoài khái niệm Observable Angular thì chúng ta còn dễ bắt gặp Observable Angular 2 là gì? Observable Angular 4 là gì? Thực tế nó được đặt tên theo các phiên bản cập nhật của Angular. Bản cập nhập Angular 2.0 thì chúng ta có Observable Angular 2 và bản cập nhật Angular 4.0 thì chúng ta có Observable Angular 4.

Tại sao lại sử dụng Observable trong Angular?

Angular sử dụng Observable để xử lý mã không đồng bộ. Giống như cách chúng ta sử dụng callback và Promise trong JavaScript vani. Trên thực tế, Observable sẽ được thêm vào các phiên bản JavaScript trong tương lai, nhưng cho đến khi điều đó xảy ra, nó sẽ được triển khai trong Angular với sự trợ giúp của thư viện RxJS.

Các tệp Observable được sử dụng rộng rãi trong Angular để xử lý mã không đồng bộ. Ví dụ, để làm việc với Ajax, khi lắng nghe các sự kiện và điều hướng giữa các trang của ứng dụng (định tuyến). Để hiểu lý do tại sao chúng ta cần sử dụng mã không đồng bộ thay vì JavaScript đơn thuần, hãy nghĩ về mã chờ phản hồi từ máy chủ từ xa.

Không có cách nào để biết khi nào phản hồi sẽ quay trở lại và liệu nó có bao giờ quay lại hay không, vì vậy không nên dừng thực thi tập lệnh cho đến khi nhận được phản hồi. Mã không đồng bộ là một giải pháp tốt hơn nhiều và cách Angular thích xử lý mã không đồng bộ là thông qua các vật có thể quan sát.

Observable hoạt động như thế nào trong Angular?

Hành vi observable tuân theo mô hình lập trình của một trình observer có hai yếu tố chính đó là observable và observer. 

Các observable gửi dữ liệu trong khi observer đặt mua nó để nhận được dữ liệu. Các observable bắn dữ liệu để đáp ứng với một sự kiện. Ví dụ: khi người dùng nhấp vào nút click để phản hồi dữ liệu nhận được từ máy chủ từ xa.

Mặt khác, Observer có ba cách xử lý để sử dụng dữ liệu mà nó nhận được:

  • onNext: xử lý dữ liệu được yêu cầu
  • onError: để xử lý lỗi
  • onComplete: được sử dụng khi quá trình kết thúc

Sự khác nhau giữa Observable và Promises

 

Như chúng ta đã biết,  Promises là để xử lý các yêu cầu không đồng bộ và Observable cũng có thể làm như vậy. Nhưng chúng khác nhau ở những đặc điểm nào?

Observable phức tạp  hơn Promises

Những Observable được cho là phức tạp có nghĩa là chúng ta phải đăng ký Observable để nhận được kết quả. Trong trường hợp của Promises thì nó có thể thực hiện ngay lập tức mà không cần đăng ký.

Observable xử lý nhiều giá trị khác với Promises

Promises chỉ có thể cung cấp 1 giá trị duy nhất trong khi các Observable có thể cung cấp cho bạn nhiều giá trị.

Có thể hủy bỏ Observable

Bạn có thể hủy bỏ Observable bằng cách hủy đăng ký nó trong khi Promises không có tính năng như vậy.

Observable có nhiều operators

Đây là điểm khác biệt giữa Observable và Promises. Các Observable cung cấp rất nhiều dạng operators như map, forEach, filter,… còn với Promises thì không có.

Trên đây là những thông tin tổng hợp khái lược nhất về Observable hoạt động như thế nào cũng như một số thông tin liên quan. Hy vọng những chia sẻ này có thể phần nào giúp quý vị hiểu hơn về Observable.

LEAVE A REPLY

Please enter your comment!
Please enter your name here