Angular Observable - Các thông tin mà bạn cần biết
19/07/2023 01:27
Nếu bạn muốn sử dụng Angular nhưng cảm thấy hơi sợ hãi với thuật ngữ hoặc đã nghe nói về Observables và muốn biết ý nghĩa của nó hoặc ngay cả khi bạn là nhà phát triển Angular nhưng vẫn không chắc mình hiểu chủ đề này. Không cần tìm đâu xa vì hướng dẫn này nhằm hỗ trợ bạn hiểu khái niệm cốt lõi này của Angular.
# Tại sao nên sử dụng Observable ?
Trong các hướng dẫn sau, chúng tôi sẽ giải thích việc sử dụng Ajax và phát triển một ứng dụng dựa trên PHP và Angular. Tất cả mọi thứ đều dựa trên mã không đồng bộ, vì vậy điều rất quan trọng là phải hiểu cách đặc biệt mà Angular xử lý mã đó.
Angular sử dụng Observable để xử lý mã không đồng bộ. Giống như cách chúng tôi sử dụng các cuộc gọi lại và lời hứa trong vanilla JavaScript. 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 thì nó mới được triển khai trong Angular với sự trợ giúp của thư viện RxJS .
Các thiết bị quan sát đượ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 giả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ó 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 mà Angular ưu tiên xử lý mã không đồng bộ là thông qua các thiết bị quan sát.
# Cách hoạt động của Observable trong Angular?
Hành vi có thể quan sát tuân theo mẫu lập trình của một Observable có hai người chơi chính:
- Observer
- Observable
Observable gửi dữ liệu trong khi Observer đăng ký nó để nhận dữ liệu.
Observable kích hoạt dữ liệu để phản hồi lại một sự kiện . Ví dụ: khi người dùng nhấp vào nút hoặc phản hồi dữ liệu nhận được từ máy chủ từ xa.
Mặt khác, Observable có ba tay cầm để 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
Khi bạn viết một Observable , bạn có thể quyết định phải làm gì khi lấy lại dữ liệu được yêu cầu, cách xử lý trong trường hợp có lỗi và phải làm gì nếu mã đã chạy xong.
# kết luận
Một ví dụ quan trọng của Observable là mô-đun HttpClient , xử lý AJAX trong Angular, như bạn có thể thấy trong loạt bài hướng dẫn minh họa mẫu bằng cách phát triển ứng dụng Angular với phần phụ trợ PHP .
