Như chúng ta đã học được trong bài học trước đó,
giao thức HTTP cho phép chúng ta giao tiếp giữa một khách hàng và một máy chủ.
Chúng ta đã thấy một số chi tiết về giao thức HTTP đã có trong bài học trước đó.
Trong bài học này, chúng ta sẽ khám phá hỗ trợ Angular cho HTTP.
Angular hỗ trợ HTTP thông qua máy khách HTTP Angular.
Chúng ta sẽ xem xét làm thế nào chúng ta có thể tận dụng máy
khách HTTP Angular cho giao tiếp client-server,
trong ứng dụng Angular của chúng tôi.
Hai bài tập mà theo sau bài giảng này,
chúng ta sẽ khám phá việc sử dụng thực tế
của máy khách HTTP Angular trong ứng dụng Angular của chúng tôi.
Hãy nhìn vào một chút chi tiết của khách hàng HTTP trong bài giảng này.
Như chúng ta mong đợi,
Angular tận dụng giao thức HTTP để cho phép giao tiếp giữa máy
khách Angular của chúng tôi và máy chủ dựa trên HTTP.
Hầu hết các trình duyệt hiện đại, thường được sử dụng để hỗ trợ
XMLHttpRequest hoặc XHR cách giao tiếp với máy chủ. C@@
àng ngày, các trình duyệt đang áp dụng API Fetch,
đây là một sự thay thế hiện đại cho XMLHttpRequest như
một cách cung cấp giao tiếp giữa trình duyệt và máy chủ.
Góc tận dụng điều này để giao tiếp với máy chủ bằng cách sử dụng máy khách HTTP.
Chúng ta sẽ xem xét việc sử dụng các khách hàng HTTP và làm thế nào chúng ta có thể sử dụng HttpClientModule,
trong ứng dụng Angular của chúng tôi để kích hoạt Client-Server Communication.
Bất kỳ giao tiếp nào giữa máy khách và máy chủ như chúng ta mong đợi,
sẽ không đồng bộ trong tự nhiên.
Vì vậy, điều đó có nghĩa là khách hàng của bạn
cần phải chờ dữ liệu được gửi từ trang web máy chủ.
Do đó, khách hàng của bạn cần phải được
cấu hình để đối phó với sự chậm trễ này trong việc thu thập dữ liệu.
Trong mô-đun trước đó,
chúng tôi đã cấu hình các ứng dụng khách hàng của chúng tôi để có
thể hiển thị các spinner tiến trình trên giao diện người dùng,
để giữ cho người dùng thông báo về thực tế là có một sự chậm trễ trong việc thu thập dữ liệu,
trước khi xem được hiển thị. Điều
đó đến với sự trợ giúp của chúng tôi trong bài học này,
nơi chúng tôi rõ ràng phải đối phó với sự chậm trễ để thu thập dữ liệu từ trang web máy chủ.
Việc truy cập dữ liệu trong ứng dụng Angular của chúng tôi,
nó luôn luôn là tốt hơn để ủy thác trách nhiệm này cho dịch vụ.
Vì vậy, chúng tôi để cho dịch vụ đối phó với sự tương tác với máy chủ,
và sau đó thành phần của bạn có được dữ liệu bằng cách gọi các phương thức của dịch vụ.
Tương tác dịch vụ thành phần mà chúng tôi đã thiết lập trong mô-đun trước đó.
Vì vậy, tất cả những gì chúng ta cần làm,
là cập nhật các dịch vụ của chúng tôi để tận dụng mô-đun HTTP để giao tiếp với máy chủ,
để lấy dữ liệu từ máy chủ và sau đó,
cung cấp dữ liệu cho các thành phần.
Các máy chủ HTTP chính nó,
sẽ trả lại dữ liệu cho khách hàng của chúng
tôi và mô-đun HTTP của chúng tôi trả về dữ liệu cho dịch vụ của chúng tôi trong tiếp theo quan sát được.
Điều này quan sát được, sau đó sẽ được xử lý và
sau đó trả lại như là một quan sát được để thành phần của chúng tôi.
Phần đó chúng tôi đã thiết lập trong mô-đun trước đó.
Vì vậy, chúng tôi sẽ tận dụng điều đó để cho phép chúng tôi nhanh chóng
trượt giao tiếp HTTP giữa khách hàng và máy chủ,
giữa dịch vụ và trang web máy chủ,
và sau đó phần còn lại của cơ sở hạ tầng
đã được đặt trong ứng dụng Angular của chúng tôi
có thể dễ dàng đối phó với việc cung cấp của quan sát được thành phần của chúng tôi,
và các thành phần đã đăng ký để quan sát viên đó.
Hiệu ứng bổ sung mà chúng tôi sẽ giải quyết,
là làm thế nào để xử lý lỗi.
Chúng ta sẽ nói về điều đó trong một chút chi tiết hơn trong các trang trình bày sau này.
Vì vậy, như tôi đã đề cập,
khách hàng HTTP trả về một quan sát được.
Vì vậy, khi bạn gọi mô-đun HTTP,
vì vậy bạn sẽ thiết lập dịch vụ của bạn để sử dụng mô-đun HTTP,
và với mô-đun HTTP,
nó cung cấp cho bạn một số phương pháp phù hợp với get,
put, post, và xóa động từ của giao thức HTTP.
Vì vậy, các
phương pháp get, put, post, và delete được tự động hỗ trợ bởi mô-đun HTTP.
Vì vậy, bạn sẽ tận dụng các phương pháp này để có thể thực hiện
các hoạt động cụ thể trên trang web máy chủ.
Vì vậy, khi bạn phát hành một cuộc gọi HTTP get,
bạn đang yêu cầu cho dữ liệu được chuyển từ máy chủ đến máy khách.
Các khách hàng HTTP lần lượt,
sẽ xử lý quan sát được cung cấp thông qua các mô-đun HTTP góc,
và sau đó cung cấp mà quan sát được để thành phần của chúng tôi.
Trong thành phần của chúng tôi, chúng tôi đã đăng ký
để quan sát được cung cấp bởi dịch vụ của chúng tôi,
và do đó xử lý dữ liệu được gửi qua quan sát,
là khá thẳng về phía trước cho chúng tôi.
Nếu các ứng dụng góc là
giao tiếp với một máy chủ đó là trả về các phản ứng trong định dạng JSON,
các khách hàng HTTP góc có được phương pháp chính nó
phân tích các phản ứng JSON của máy chủ vào một đối tượng ẩn danh.
Các khách hàng chính nó, không biết chính xác làm thế nào để giải thích hình dạng của đối tượng này.
Vì vậy, chúng ta có thể hỗ trợ các khách hàng HTTP bằng cách xác định hình dạng của đối tượng,
bằng cách xác định một khai báo của một lớp JavaScript,
trong đó xác định hình dạng của đối tượng sao cho đầu ra
từ get có thể được tiêu thụ một cách dễ dàng bởi các ứng dụng.
Vì vậy, trong bài tập,
bạn sẽ thấy tôi tuyên bố.
Ví dụ, chúng ta sẽ nói này.http.get,
và sau đó trong ngoặc vuông góc,
tôi chỉ định món ăn ở đó.
Vì vậy, theo cách đó,
dữ liệu đến cho yêu cầu get từ trang web máy chủ sẽ được chuyển đổi thành
một đối tượng món ăn và sau đó có thể được tiêu thụ ngay lập tức
bởi thành phần của tôi khi nó được đặt ra nội dung.
Bây giờ, nếu bạn yêu cầu,
bạn có thể truy cập vào phản hồi hoàn chỉnh đến từ trang web máy chủ.
Nhưng điều đó sẽ chỉ trong những trường hợp cụ thể,
nơi bạn cần truy cập vào ví dụ,
các tiêu đề của thông báo phản hồi HTTP đến và vân vân.
Nhưng đối với hầu hết các mục đích,
chỉ bằng cách khai báo hình dạng của đối tượng,
chúng ta có thể dễ dàng nhận được dữ liệu JSON tự động phân tích thành một cách
có thể được tiêu thụ bởi ứng dụng Angular của chúng tôi dễ dàng hơn.
Như chúng ta mong đợi, giao
tiếp giữa máy khách và máy chủ sẽ không được lỗi miễn phí.
Lỗi sẽ xuất hiện vì nhiều lý do khác nhau.
Nó có thể là kết nối không được thiết lập giữa máy khách và máy chủ,
nó có thể là một thực tế là trả lời từ máy chủ bị mất,
nó có thể là một thực tế rằng máy chủ không thể tìm thấy dữ liệu mà bạn đang tìm kiếm,
và do đó trả về một 404 chỉ ra rằng máy chủ
là không thể cung cấp dữ liệu cho bạn hoặc thiếu dữ liệu trên trang web máy chủ, và như vậy.
Vì vậy, khách hàng của bạn cần phải đối phó với tất cả các lỗi này.
Vì vậy, trong dịch vụ của
chúng tôi, chúng tôi sẽ cấu hình dịch vụ của chúng tôi để có thể bắt gặp lỗi này.
Vì vậy, đây là nơi việc sử dụng các phương pháp bắt được hỗ trợ bởi HTTP,
cho phép chúng tôi để bắt lỗi, xử lý lỗi đó,
và sau đó gửi các thông báo lỗi cho thành phần của chúng tôi,
và sau đó cho các thành phần đối phó với các thông báo lỗi trong
bất cứ cách nào nó có vẻ thích hợp.
Bây giờ, trong thành phần của chúng tôi ví dụ,
chúng tôi sẽ hiển thị thông tin lỗi mà chúng tôi
thu được trong quan điểm của chúng tôi để chỉ ra cho người dùng,
rằng một lỗi đã xảy ra trong việc lấy dữ liệu từ trang web máy chủ.
Vì vậy, trong dịch vụ,
chúng ta cần phải xử lý lỗi này.
Bây giờ, khi thông tin lỗi này thu được từ
trang web máy chủ thông qua HTTP client được xử lý trong dịch vụ của chúng tôi,
sau đó chúng tôi sẽ chuyển đổi nó thành một chuỗi,
và chuỗi đó sẽ được chuyển đến thành phần của chúng tôi bằng cách sử dụng phương pháp ném quan sát được.
Vì vậy, phương pháp ném cho phép chúng ta ném một lỗi.
Sau đó, bởi vì trong thành phần của chúng tôi, chúng tôi
đăng ký vào điều này quan sát được trong phương pháp đăng ký,
sau đó bạn cần phải đối phó với lỗi.
Vì vậy, trong phần đăng ký,
trước đó chúng tôi đã thấy chỉ có một chức năng được chỉ định cho các đăng ký,
và rằng giao dịch với các hoạt động bình thường.
Nhưng cùng với điều đó,
chúng tôi cũng có thể cung cấp một chức năng thứ hai mà lỗi sẽ được phân phối.
Vì vậy, bạn sẽ thấy tôi cấu hình phần đăng ký của thành phần của tôi
bằng cách sử dụng một chức năng thứ hai được chỉ định trong phương thức đăng ký ở đó,
như một ví dụ minh họa bởi mã này ở đây.
Bằng cách đó, lỗi sẽ bị bắt trong
thành phần của tôi và sau đó thông báo lỗi thích hợp,
thông tin sẽ được gửi đến người dùng trong chế độ xem.
Vì vậy, chúng ta sẽ thấy rằng như là một phần của bài tập thứ hai trong bài học đặc biệt này.
Với sự hiểu biết nhanh chóng này của HTTP client,
bây giờ chúng ta sẽ chuyển sang các bài tập mà chúng tôi sẽ sử dụng máy
khách HTTP góc được cung cấp thông qua mô-đun HTTP của thư viện Angular HTTP,
để cho phép chúng tôi giao tiếp với máy chủ của chúng tôi.