Bây giờ bạn đã có giới thiệu đầu tiên của bạn về Lập trình phản ứng, RxJS,
và việc sử dụng mô hình quan sát và
cách Angular tận dụng mô hình quan sát và hỗ trợ Lập trình phản ứng, chúng
ta hãy chuyển sang bài tập đầu tiên của chúng tôi để làm
ướt chân bằng cách sử dụng các vật thể quan sát trong Angular.
Trong bài tập này, chúng ta sẽ cập nhật các dịch vụ của chúng tôi để sử dụng các khả năng quan sát,
bởi vì khi chúng ta chuyển sang mô-đun tiếp theo, nơi chúng ta sẽ xem xét hỗ trợ HTTP trong Angular,
chúng ta sẽ ngay lập tức hiểu rằng hỗ trợ HTTP trong Angular dựa trên quan sát được.
Vì vậy, nó là một ý tưởng tốt cho chúng ta để
làm quen với việc sử dụng các vật thể quan sát trong bài học này chính nó.
Vì vậy, chúng tôi sẽ cập nhật các dịch vụ để xuất khẩu quan sát được.
Sau đó, trong các thành phần của chúng
tôi, chúng tôi sẽ đăng ký các quan sát này và
có được dữ liệu cần thiết để hiển thị các quan điểm.
Chúng ta hãy tiếp tục tập thể dục tiếp theo.
Bạn phải tự hỏi,
làm thế nào để chúng tôi sử dụng RXJS trong Angular,
và nó đã có sẵn cho chúng tôi?
Vì vậy, những gì bạn sẽ nhận thấy là với CLI Angular,
khi bạn giàn giáo ra ứng dụng Angular của bạn,
RXJS được tự động bao gồm trong đó.
Vì vậy, nếu bạn đi đến tập tin package.json,
bạn sẽ nhận thấy rằng trong các phụ thuộc,
thư viện RxJS đã được bao gồm trong ứng dụng của bạn.
Vì vậy, bất cứ điều gì bạn cần sử dụng từ RxJS đã có sẵn cho bạn.
Vì vậy, chúng tôi có thể đi trước và sử dụng thư viện RxJS ngay trong ứng dụng Angular của chúng tôi.
Nếu bạn đang xây dựng ứng dụng Angular của bạn từ đầu,
sau đó bạn cần phải thực hiện một cài đặt npm của RxJS.
Đi đến tập tin dish.service.js,
trước tiên tôi nhập khẩu của
từ 'rxjs' observables của chúng tôi.
Chúng tôi cũng sẽ nhập- Bây giờ,
khi bạn sử dụng RxJS trong ứng dụng Angular của bạn,
toàn bộ thư viện không được bao gồm.
Bạn chỉ có thể nhập bất kỳ phần nào mà bạn cần từ thư viện RxJS,
và sau đó sử dụng nó trong ứng dụng Angular của bạn.
Vì vậy, khi ứng dụng Angular của bạn cuối cùng được chuẩn bị để triển khai,
chỉ những phần từ RXJS được yêu cầu sẽ
được bao gồm trong ứng dụng Angular của bạn.
Toán tử trễ.
Các nhà điều hành chậm trễ cho phép chúng tôi để trì hoãn việc phát ra các mục từ của chúng tôi quan sát được.
Đi vào các phương pháp,
bây giờ chúng tôi sẽ cập nhật các phương pháp này để sử dụng các khả năng quan sát,
và chúng tôi sẽ trả lại một lời hứa bằng cách chuyển đổi
quan sát thành lời hứa của bạn bằng cách sử dụng toán tử ToPromise.
Vì vậy, nếu bạn đã có các thành phần đang sử dụng promise,
và bạn muốn không sửa đổi các thành phần,
bạn chỉ có thể chuyển đổi một quan sát được để hứa hẹn của bạn và sau đó
gửi lời hứa đến các thành phần của bạn.
Như chúng tôi nhận ra, hứa hẹn sẽ chỉ phát ra một mục,
trong khi bạn có thể thấy rằng quan sát được dựa trên luồng.
Vì vậy, đó là giới hạn mà bạn sẽ nhận được nếu bạn
chỉ cần sử dụng toán tử hai lời hứa trên các vật thể quan sát
và sử dụng nó bởi vì các toán tử ToPromise
sẽ cho phép quan sát của bạn chỉ phát ra một giá trị.
Nhưng cho thời điểm này, chúng ta hãy làm điều đó như là bước đầu tiên trước khi chúng ta
chuyển sang việc thực hiện đầy đủ các dịch vụ của chúng tôi.
Vì vậy, đi đến phương pháp getDishes,
tôi sẽ trả lại những món ăn này.
Vì vậy, tôi sẽ loại bỏ phần đó và sau đó nói, trở lại của.
Nếu bạn muốn phát ra chỉ có một giá trị từ quan sát của
bạn, bạn sẽ sử dụng phương pháp của,
và đó sẽ mất bất cứ giá trị nào mà bạn muốn phát ra trong đó.
Điều đó đủ cho ứng dụng hiện tại của chúng tôi vào lúc này.
Vì vậy, chúng tôi sẽ sử dụng điều đó,
và chúng tôi cũng muốn trì hoãn việc phát ra giá trị bằng hai giây.
Vì vậy, tôi sẽ thay đổi phần này của mã để sử dụng
các nhà điều hành chậm trễ cho quan sát của tôi, sử dụng đường ống.
Tôi cần chuyển đổi thành Promise này và phát ra lời hứa.
Vì vậy, bây giờ, phương pháp getDishes của tôi được cập nhật để sử dụng một quan sát được,
và sau đó chuyển đổi đó thành một lời hứa và sau đó gửi lời hứa cho thành phần của tôi.
Vì vậy, tôi không cần phải làm bất kỳ cập nhật của các thành phần.
Hãy sử dụng cùng một cách tiếp cận để cập nhật hai phương pháp còn lại của dịch vụ của tôi ở đây.
Vì vậy, tôi sẽ chỉ sao chép phần này,
và sau đó cập nhật phần đó,
sau đó lấy phần chậm trễ của nó,
và sau đó cập nhật phần này để sử dụng sự chậm trễ
và chuyển đổi phương pháp toPromise này.
Vì vậy, với điều đó, phương pháp GetDish của tôi cũng được cập nhật.
Hãy để tôi làm điều tương tự với phương pháp GetFeaturedDish.
Một lần nữa, nếu bạn muốn,
bạn có thể gõ ra toàn bộ điều.
Tôi chỉ là lười biếng để chỉ cắt và dán và thay đổi các phần mà
tôi muốn thay đổi và chuyển đổi phương pháp toPromise này.
Đó là nó. Dịch vụ của tôi bây giờ được cập nhật để trả lại lời hứa từ một quan sát được ở đây.
Vì vậy, với bản cập nhật này,
dịch vụ món ăn của tôi được cập nhật để sử dụng các vật thể quan sát
chứ không phải trực tiếp sử dụng các giá trị.
Tương tự như vậy, tiếp tục và cập nhật các dịch vụ dẫn đầu và các dịch vụ khuyến mãi.
Bây giờ bạn sẽ nhận thấy rằng tôi đã cập nhật
các dịch vụ lãnh đạo để sử dụng các quan sát được.
Tương tự như vậy, tôi cũng đã cập nhật các dịch vụ khuyến mãi để sử dụng các vật thể quan sát.
Lưu các thay đổi và chúng ta hãy đi và xem ứng dụng của chúng tôi.
Khi bạn đi đến trình duyệt,
bạn sẽ nhận thấy rằng ứng dụng của bạn thực hiện chính xác theo cách tương tự như trước
và lấy dữ liệu từ các dịch vụ giống như trước đây.
Vì vậy, không có nhiều sự thay đổi trong ứng dụng của bạn như vậy.
Nó thực hiện chính xác như nhau.
Vì vậy, lưu ý rằng bằng cách thay thế lời hứa của bạn bằng các vật thể quan sát,
không có nhiều thay đổi trong ứng dụng của bạn như bạn mong đợi nó.
Bây giờ, chúng ta hãy đi thêm một bước nữa.
Bây giờ chúng tôi sẽ cho phép các dịch vụ của chúng tôi trở lại quan sát được,
và chúng tôi sẽ cập nhật các thành phần để sử dụng các quan sát được.
Lý do như tôi đã đề cập,
là bởi vì khi chúng tôi cập nhật
các dịch vụ của chúng tôi để sử dụng dịch vụ HTTP để đi đến một máy chủ để lấy dữ liệu,
sau đó chúng tôi sẽ lưu ý rằng trong Angular các phương thức HTTP sẽ trả về quan sát được.
Các dịch vụ có thể chỉ đơn giản là chuyển các quan sát đến các thành phần của chúng tôi và
cho phép các thành phần đăng ký các quan sát này và sử
dụng các dữ liệu mà họ có được từ đó.
Vì vậy, đây sẽ là một bước trung gian để chúng ta bước vào giai đoạn đó.
Chúng ta sẽ nhận được để xem xét HTTP trong mô-đun tiếp theo.
Quay trở lại các dịch vụ của chúng tôi,
bây giờ bạn có thể loại bỏ các ToPromise đầu tiên bằng cách loại bỏ
các toán tử ToPromise bởi vì chúng tôi không cần nó
nữa và sau đó chúng tôi sẽ đơn giản loại bỏ các ToPromise từ này,
import observable và sau đó thay vào đó cho phép
phương thức
của chúng tôi trở về observables thay vì promise .
Vì vậy, như tôi đã đề cập,
bất cứ điều gì một lời hứa có thể làm một điều quan sát cũng có thể làm.
Vì vậy, chúng ta hãy cập nhật tất cả những điều này để trả về quan sát được.
Làm tương tự với hai dịch vụ còn lại.
Bây giờ bạn sẽ nhận thấy rằng tôi cũng đã cập nhật các dịch vụ lãnh đạo
để chỉ đơn giản là trả lại quan sát thay vì lời hứa,
và cũng dịch vụ khuyến mãi đã được
cập nhật tương ứng để trở lại quan sát thay vì lời hứa.
Bây giờ điều này có nghĩa là chúng ta cần phải đi và cập nhật các thành phần của chúng ta
để sử dụng các vật thể quan sát hơn là những lời hứa như chúng ta đã làm trước đó.
Bây giờ cho lời hứa, chúng ta thấy rằng chúng ta cần phải sử dụng .then
để có được giữ của kết quả khi quyết tâm của lời hứa được thực hiện.
Với một quan sát được, .then được chuyển đổi thành .subscribe.
Cách bạn tiêu thụ dữ liệu sẽ vẫn giữ nguyên.
Vì vậy, với sự thay đổi nhỏ trong các thành phần của bạn,
các thành phần bây giờ sẽ có thể xử lý các khả năng quan sát hơn là hứa hẹn.
Vì vậy, đi đến tất cả bốn thành phần sử dụng các dịch vụ,
trước tiên, chúng ta hãy đi đến tệp menu.component.t.
Trong tập tin menu.component.t,
bạn sẽ ngay lập tức nhận thấy dòng squiggly màu đỏ ở đó,
dưới sau đó rõ ràng bởi vì chúng tôi không trả lại lời hứa.
Thay vào đó, chúng tôi đang trả lại một quan sát được.
Vì vậy, chỉ cần chuyển đổi điều đó sau đó để đăng ký và đó là nó.
Thành phần trình đơn của bạn bây giờ có
thể tiêu thụ các giá trị quan sát được phát ra bởi quan sát được.
Thực hiện thay đổi tương tự đối với tệp.component.t, tệp.
dishdetail.component.t và tệp.component.t home.t.
Sau khi cập nhật các tập tin Tapscott thành phần còn lại, chúng
ta hãy đi và xem xét hành vi của ứng dụng của chúng tôi trong trình duyệt.
Đi vào trình duyệt, bạn sẽ nhận thấy không có sự khác biệt trong hành vi của ứng dụng của chúng tôi.
Phiên bản này của ứng dụng Angular của chúng tôi được cập nhật để sử dụng
observables thay vì lời hứa.
Vì vậy, các thành phần nhà ở đây,
về thành phần thực hiện chính xác theo cách tương tự như trước,
và các thành phần trình đơn thực hiện chính xác cùng một điều.
Ngoài ra các thành phần chi tiết món ăn sẽ hoạt động chính xác theo cách như trước.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã thực hiện các bước đầu tiên của chúng tôi để sử dụng
các vật thể quan sát trong ứng dụng Angular của chúng tôi bằng cách cập nhật các dịch vụ và tương ứng các thành phần
để sử dụng các vật thể quan sát thay cho lời hứa.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp RxJS phần một.