[MUSIC]
Giao tiếp giữa khách hàng và máy chủ không bao giờ là một thỏa thuận được thực hiện.
Để diễn giải một câu tục ngữ nổi tiếng,
có rất nhiều sự rung chuyển giữa máy khách và máy chủ.
Vậy làm thế nào để chúng ta đối phó với các lỗi khi chúng phát sinh,
khi chúng ta đang giao tiếp giữa khách hàng và máy chủ?
Hãy nói về điều đó trong bài tập này.
Khi máy chủ tạo ra một phản ứng, hoặc khách hàng HTTP,
trong khi giao tiếp với máy chủ, gặp phải một lỗi và sau đó tạo ra
một phản ứng lỗi, điều này được cung cấp dưới dạng phản ứng lỗi HTTP.
Bây giờ, phản ứng này, chúng tôi muốn có thể xử lý nó và
sau đó biến nó thành một chuỗi thông điệp phản ứng,
có thể được gửi đến khách hàng để khách hàng có thể hiển thị điều này trên màn hình.
Vì vậy, để cho phép chúng tôi để làm điều đó,
chúng tôi sẽ tạo ra một dịch vụ mới có tên là quá trình thông điệp HTTP trong này, đây là thư mục.
Vì vậy, để làm điều đó, tại dấu nhắc gõ ng,
g dịch vụ dịch vụ/Processhttpmsg,
và tạo ra các dịch vụ Processhttpmsg.
Bây giờ, một khi dịch vụ được tạo ra, chúng tôi sẽ tiếp tục và
thêm nó vào mô-đun ứng dụng.
Và sau đó chúng tôi sẽ thêm vào một phương pháp để các dịch vụ Processhttpmsg.
Bây giờ chúng tôi đã tạo ra dịch vụ Processhttpmsg, chúng
ta hãy tiếp tục và sau đó thêm vào tệp app.module.t.
Vì vậy, đi đến các tập tin app.module.t,
cho phép tôi nhập các dịch vụ Processhttpmsg,
Từ '. /services/process-httpmsg.service '.
Vì vậy, một khi được nhập khẩu, sau đó chúng tôi sẽ có thể sử dụng nó trong ứng dụng của chúng tôi.
Vì vậy, chúng ta hãy tiếp tục và thêm điều đó vào các nhà cung cấp của chúng tôi.
Vì vậy, đi vào các nhà cung cấp của chúng
tôi, hãy để tôi thêm vào ProcesshttpmsgService vào các nhà cung cấp.
Điều đầu tiên mà chúng tôi sẽ làm là bao gồm một phương pháp mới
vào ProcesshttpmsgService gọi là xử lý lỗi,
mà sẽ chăm sóc xử lý lỗi khi chúng phát sinh.
Và sau đó chúng tôi sẽ sử dụng chúng trong các dịch vụ mà chúng tôi truy cập vào máy chủ.
Để bắt đầu, chúng ta hãy nhập khẩu đầu tiên,
ThrowError từ, rxjs,
và điều này giúp chúng ta ném lỗi bất cứ khi nào phát sinh.
Và sau đó chúng tôi nhập khẩu HttpErrorResponse từ,
góc độ/common/http.
Sau đó, chúng tôi sẽ bắt đầu thiết kế phương pháp HandleError
, và điều này mất, như một tham số, một lỗi có thể là một phản hồi,
đó là một phản hồi lỗi từ máy chủ,
hoặc bất kỳ lý do nào khác mà lỗi phát sinh.
Vì vậy, trong phương pháp HandleError này, chúng ta phải làm gì?
Hãy cố gắng xây dựng một thông báo tóm tắt những gì các lỗi là tất cả về.
Vì vậy, chúng tôi sẽ bao gồm một biến chuỗi mới ở đây.
Nếu error.error là một thể hiện
của ErrorEvent, vì vậy nếu đây là một sự kiện lỗi xảy ra,
thì error.error.message sẽ chứa thông tin.
Vì vậy, chúng tôi sẽ thiết lập thông báo lỗi để
error.error.message.
Nếu đó không phải là trường hợp, thì điều đó có nghĩa là điều này đến từ phía máy chủ,
và do đó, trong trường hợp đó, thông báo lỗi được xây dựng bằng cách nói bằng dấu ngoặc kép,
lưu ý dấu ngoặc kép ở đây, và sau đó $ {error.status}.
Vì vậy, chúng tôi đang trích xuất thông tin trạng thái từ đó.
Và sau đó, - error.StatusText,
nếu StatusText tồn tại, hoặc
đó sẽ là một chuỗi trống ở đó.
Và sau đó chúng tôi cũng sẽ bao gồm các error.error chính nó,
đối tượng lỗi hoàn chỉnh, ngay trong chuỗi.
Và sau đó sử dụng nó như là thông báo lỗi của chúng tôi.
Bây giờ, một khi chúng tôi có thông báo lỗi,
sau đó chúng tôi sẽ có thể sử dụng ThrowError để
trả về một lỗi quan sát được cho ứng dụng của chúng tôi.
Vì vậy, điều này có nghĩa là đây là ném một lỗi vào thời điểm này,
với thông báo lỗi được bao gồm ở đó.
Vì vậy, chuỗi thông báo lỗi này được xây dựng dựa trên thông tin
mà chúng tôi có được ở đây, hoặc bởi vì phía máy chủ phản hồi với một lỗi hoặc
lỗi có thể là từ các lý do khác.
Vì vậy, trong cả hai trường hợp, chúng tôi sẽ xây dựng một thông báo lỗi và sau đó trả lại nó.
Bây giờ, chúng ta sử dụng lỗi xử lý này ở đâu?
Bây giờ, trong dịch vụ của chúng tôi, ví dụ như các tập tin dishservice.t,
chúng tôi thấy rằng trước đó khi chúng tôi nói HTTP này nhận được, và sau đó chúng tôi chỉ nói bản đồ,
và sau đó giả định rằng các phản ứng luôn luôn là một phản ứng tích cực.
Nhưng giả sử phản ứng của họ không tích cực, và
sau đó nó trả về một lỗi, sau đó chúng ta cần phải bắt lỗi đó.
Để giúp chúng tôi với điều này, chúng tôi nhập khẩu các nhà điều hành CatchError từ rxjs,
và sau đó chúng tôi cũng nhập khẩu các ProcesshttpmsgService
mà chúng tôi vừa tạo ra trước đó vào
dịch vụ món ăn của chúng tôi để chúng tôi có thể sử dụng phương pháp lỗi xử lý từ đó.
Vì vậy, chúng tôi nhập khẩu này từ. /process-httpmsg.service.
Và sau đó, đi xuống trình xây dựng,
bây giờ chúng ta tiêm dịch vụ thông điệp HTTP
vào trình xây dựng, cùng với trình khách HTTP. Để
chúng tôi có thể sử dụng dịch vụ này,
đặc biệt là phương pháp lỗi xử lý của dịch vụ để xử lý các lỗi
được trả về bởi khách hàng HTTP của chúng tôi ở đó.
Bây giờ, một khi chúng tôi đã cấu hình các constructor,
sau đó để xử lý lỗi trong phương pháp getDishes
ví dụ, chúng tôi sẽ đường ống để CatchErrors phương pháp.
Và sau đó gọi phương pháp HandleError sau
này.ProcesshttpmsgService trong phương pháp CatchError.
Vì vậy, theo cách này Khi khách hàng HTTP trả về một lỗi sau đó điều này sẽ được xử lý và
thông báo lỗi thích hợp sẽ được trích xuất.
Và sau đó nó sẽ kết thúc ném lỗi thông qua
phương pháp HandleError tại thời điểm đó.
Tương tự như vậy, chúng ta hãy làm tương tự với các GetDish và
các phương pháp GetFeatureDish cũng.
Bây giờ, khi nói đến phương pháp GetDish ids,
kể từ khi phương pháp GetDish ids đang sử dụng phương pháp GetDish,.
Vì vậy, chúng ta không cần phải gọi một cách rõ ràng HandleError vì nếu có lỗi phát sinh thì
phương thức GetDishes sẽ đã chuyển đổi lỗi đó thành một chuỗi lỗi.
Vì vậy, chúng tôi chỉ cần bắt lỗi và sau đó trả lại lỗi từ GetDish Ids.
Thông thường, chúng tôi thậm chí sẽ không đi đến thời điểm này nếu một lỗi phát sinh, bởi vì
phương pháp GetDishes sẽ xử lý lỗi một cách thích hợp tại thời điểm đó.
Vì vậy, một khi chúng tôi đã cấu hình các món ăn dịch vụ thích hợp,
sau đó chúng tôi sẽ có thể sau đó sử dụng các
phương pháp CatchError để đối phó với các lỗi phát sinh.
Bây giờ chúng tôi đã cập nhật dịch vụ của chúng tôi để có thể đối phó với lỗi.
Làm thế nào để chúng ta tự xử lý điều này trong thành phần của chúng ta?
Vì vậy, trong một thành phần, vì vậy ví dụ, khi chúng ta đi đến thành phần menu.
Những gì chúng tôi nhận ra là khi chúng tôi đăng ký,
chúng tôi mong đợi các món ăn sẽ được giao cho chúng tôi.
Bây giờ, có thể là hướng dẫn của các món ăn,
lỗi sẽ được cung cấp bởi ném quan sát và
sau đó kết quả trong thông báo lỗi có sẵn cho chúng tôi.
Vì vậy, để đối phó với tình huống đó, tôi sẽ giới thiệu một
biến mới được gọi là ErrMess trong thành phần menu đó là chuỗi kiểu.
Và sau đó bản thân phương pháp đăng ký cung cấp một cách xử lý lỗi.
Vì vậy, các phương pháp đăng ký, ngay bây giờ chúng tôi đã chỉ định một chức năng ở đây.
Chúng tôi cũng có thể chỉ định một chức năng thứ hai mà
sẽ được gọi khi kết quả lỗi.
Vì vậy, trong trường hợp này, tôi có thể cung cấp một chức năng lỗi thứ hai nói
, ErrMess, đó là giá trị trả về
khi ném quan sát được thực hiện bởi DishService.
Vì vậy, trong trường hợp này, tôi sẽ nói this.errmess = errmess, và đó là nó.
Vì vậy, ở đây những gì xảy ra là khi quan sát
được trả về bởi DishService là một giá trị,
sau đó điều đó sẽ được xử lý bởi phần đầu tiên.
Nếu quan sát được trả về với ném quan sát được,
thì hàm này sẽ được thực thi.
Và trong chức năng này, chúng tôi đang dùng thông báo lỗi và
sau đó chụp thông báo lỗi vào chuỗi ErrMess này mà chúng tôi có ở đây.
Vì vậy, bây giờ chúng tôi có thông báo lỗi có sẵn cho chúng tôi, vì vậy
chúng tôi có thể hiển thị thông báo lỗi này trên quan điểm của thành phần menu này.
Vậy làm thế nào để chúng ta hiển thị điều này trong chế độ xem thành phần trình đơn?
Vì vậy, đi đến tập tin mẫu thành phần menu, ở đây chúng ta thấy rằng nếu các món ăn không phải là null,
sau đó chúng tôi đang hiển thị menu với tất cả các món ăn.
Nếu các món ăn là null thì spinner này đang được hiển thị ở đó.
Bây giờ, chúng ta sẽ thêm vào một nữa ở đây,
ngay cả khi ErrMess mà chúng ta có,
biến, không phải là null, sau đó cũng
spinner nên được ẩn và sau đó,
cuối cùng, thêm vào một div hơn với một NGIf.
Vì vậy, những gì điều này làm là lặn cuối cùng này sẽ được hiển thị trong
trường hợp có một lỗi, và thông báo lỗi.
Chuỗi ErrMess được thiết lập để thông báo lỗi.
Vì vậy, trong trường hợp đó, chúng tôi sẽ chỉ đơn giản là nói lỗi h2,
và sau đó tôi sẽ chỉ hiển thị chuỗi đó như,
Một chuỗi trong quan điểm đó, đó là nó.
Bạn có thể thực hiện một cách phức tạp hơn để hiển thị thông báo lỗi nếu bạn
muốn.
Nhưng tất cả những gì tôi sẽ làm là nếu có một lỗi,
tôi sẽ chỉ đơn giản là hiển thị lỗi trên màn hình và sau đó hiển thị một ErrMess.
Bạn thậm chí có thể phong cách nó bằng cách thay đổi màu sắc thành màu đỏ và như
vậy, nhưng tôi sẽ chỉ để nó như thế ở đó.
Vì vậy, với điều này, chúng tôi sẽ kết thúc hiển thị thông báo lỗi trong chế độ xem ở đây.
Các thủ tục tương tự cũng có thể được sử dụng với các thành phần món ăn và
cũng là thành phần nhà mà chúng tôi đang truy cập vào các dịch vụ món ăn.
Vì vậy, đi đến các thành phần món ăn, sẽ làm chính xác cùng một điều,
vì vậy trong các thành phần món ăn tôi sẽ bao gồm, ErrMess đây.
Và sau đó ngay tại đây trong đăng ký,
đây là nơi chúng tôi đang nhận được giá trị món ăn.
Vì vậy, phần đầu tiên,
những gì chúng tôi đã bao gồm sẽ được gọi là nếu quan sát trả về một giá trị.
Nhưng nếu nó không trả về một giá trị, sau đó chúng ta cần phải đối phó với các thông báo lỗi.
Và chúng tôi sẽ sử dụng chính xác cùng một
chức năng thông báo lỗi mà chúng tôi đã xác định trước đó trong thành phần menu.
Vì vậy, chúng ta sẽ nói rằng this.errmess
= Ermess ở đây.
Đó là nó, vì vậy thành phần món ăn của tôi bây giờ được cập nhật.
Vì vậy, tôi cần phải cập nhật tập tin mẫu của thành phần món ăn.
Vì vậy, đi đến các tập tin mẫu,
chúng ta thấy rằng chúng ta sẽ được hiển thị các món ăn nếu món ăn không phải là null.
Và sau đó xuống dưới đây, chúng tôi đang xử lý tình
huống mà chúng tôi sẽ hiển thị các spinner nếu món ăn là null.
Vì vậy, hãy để tôi thêm vào cũng, nếu thông báo lỗi không phải là null sau đó tôi nên
hiển thị thông báo lỗi chứ không phải là món ăn ở đây, phải không?
Vì vậy, hãy để tôi đi trước và
sao chép mã từ thành phần menu.
Tôi sẽ sử dụng chính xác cùng một mã cho các
thành phần chi tiết món ăn tập tin mẫu cũng.
Vậy, ngay đó.
Hãy để tôi tiếp tục và chèn mã đó vào đây.
Vì vậy, chúng ta thấy rằng nếu ErrMess không phải là null,
sau đó lỗi này sẽ được hiển thị trong chế độ xem ở đó.
Bây giờ cùng một điều,
đi đến thành phần nhà chúng ta cần phải trải qua các thủ tục tương tự.
Bây giờ trong thành phần nhà, tất nhiên, chúng tôi có món ăn, thăng tiến, và lãnh đạo.
Vì vậy, tôi sẽ xác định riêng biệt, Strings cho
mỗi một trong số họ bởi vì lỗi có thể phát sinh từ bất kỳ một trong ba.
Ngay bây giờ chúng ta chỉ đang đối phó với món ăn được lấy từ phía máy chủ.
Hai người còn lại tôi sẽ mong bạn làm điều đó như là một phần của, nhiệm vụ cuối cùng.
Vì vậy, chúng tôi sẽ, tôi sẽ nói món ăn errmess chuỗi và sau đó đi xuống vào mã ở đây.
Và trong mã ở đây,
chúng tôi sẽ chỉ đơn giản là nói errmess.
Món ăn này errmess = bất kỳ
errmess, đó là nó.
Và tương tự, cập nhật các tập tin mẫu thành phần nhà.
Và đi đến tập tin mẫu thành phần nhà,
chúng ta thấy rằng chúng ta có thùng món ăn hiển thị ở đó,
vì vậy bây giờ cho cái này tôi nên nói hoặc món ăn ErrMess.
Và sau đó, dưới đây, tôi sẽ bao gồm mã
mà tôi đã sao chép từ thành phần menu, và
sau đó tôi cập nhật nó vào món ăn ErrMess ở đây.
Và cũng có thể, cập nhật điều này cho DisherRmess ở đây, đó là nó.
Hãy lưu các thay đổi.
Đi đến trình duyệt, bạn thấy rằng mọi thứ hoạt động giống như trước đây.
Các nhà, các thành phần menu và cũng là thành phần chi tiết món ăn mà không có bất kỳ vấn đề.
Bây giờ câu hỏi là, làm thế nào để chúng ta gây ra lỗi?
Để gây ra lỗi, một cách có thể mà chúng ta có thể giải quyết vấn đề là chúng ta đi và
tìm kiếm một thông tin không tồn tại từ máy chủ.
Hãy để tôi đi đến dịch vụ món ăn và sau đó gây ra
vấn đề đầu tiên của tôi trong DishService ở đây.
Vì vậy, đối với các món ăn đặc trưng thay vì các món ăn, hãy để tôi phạm một sai lầm và
nói dishees và sau đó lưu lại sự thay đổi.
Rõ ràng điều đó có nghĩa là url này không tồn tại.
Vì vậy, điều gì sẽ xảy ra nếu nó truy cập vào máy chủ?
Đi đến trình duyệt khi chúng ta di chuyển,
bạn thấy rằng món ăn không được hiển thị ở đây.
Nó nói ở đây lỗi 404 Không tìm thấy.
Điều này là bởi vì chúng tôi đang cố gắng truy cập thông tin món ăn tại
các địa chỉ URL mà không tồn tại ở phía máy chủ.
Vì vậy, bạn thấy cách thông báo lỗi đang được hiển thị ở đây.
Tất nhiên, bạn có thể được một chút ưa thích hơn và làm nhiều công việc hơn xung quanh điều này và
sau đó hiển thị thông báo lỗi một cách có ý nghĩa hơn.
Nhưng nguyên tắc cơ bản được đánh dấu ở đây nói rằng bạn
có thể hiển thị một thông báo lỗi nếu một cái gì đó không được thực hiện đúng
khi bạn đang cố gắng truy cập thông tin từ phía máy chủ của bạn.
Tất nhiên, vì vậy đây là một lỗi được tạo ra nhân tạo trong ứng dụng của tôi.
Để gây ra một loại lỗi khác, tôi đã đi đến cửa sổ thiết bị đầu cuối của tôi và
sau đó tắt máy chủ để xem ứng dụng Angular của tôi sẽ làm gì trong trường hợp này.
Vì vậy, sau khi tắt máy chủ,
chúng ta hãy xem những gì các thành phần nhà sẽ hiển thị trong chế độ xem của nó.
Vì vậy, đi đến thành phần nhà, bây giờ chúng ta thấy rằng bởi vì
ứng dụng Angular của tôi không thể truy cập vào máy chủ, nó đã gây ra một lỗi một lần nữa.
Và sau đó nó cho thấy chuỗi này ở đó để chỉ ra rằng một số lỗi đã xảy ra.
Tất nhiên, đây là một chuỗi khó hiểu,
không truyền đạt bất cứ điều gì có ý nghĩa về nguồn gốc của lỗi là gì.
Nhưng đó là tất cả những gì chúng ta có thể cố gắng truy cập vào máy chủ trong ứng dụng này.
Điều tương tự, nếu tôi vào menu, bạn sẽ thấy cùng một loại điều được
hiển thị, bởi vì máy chủ không có sẵn, và do đó
thông tin món ăn không thể được lấy từ máy chủ.
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 ta đã học được cách đối phó với các
lỗi phát sinh trong giao tiếp máy chủ khách trong ứng dụng Angular của chúng tôi.
Đâ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 http phần hai.
[ NHẠC]