Trong bài tập trước,
chúng tôi đã cập nhật các dịch vụ ứng dụng Angular của chúng tôi để sử dụng lời hứa,
và cũng cập nhật các thành phần để
đối phó với những lời hứa được trả lại bởi các dịch vụ.
Trong bài tập này, đó là một phần mở rộng cho bài tập trước đó,
chúng ta sẽ mô phỏng một sự chậm trễ thời gian cho lời hứa để giải quyết.
Trong bài tập trước đó,
những lời hứa đã được giải quyết ngay lập tức.
Nhưng trong cuộc sống thực,
khi bạn yêu cầu dữ liệu từ một dịch vụ và dịch vụ cung cấp một lời hứa
, dịch vụ, lần lượt,
cần phải đi và lấy dữ liệu từ một máy chủ back-end,
và điều này sẽ mất thời gian.
Vì vậy, để hứa hẹn giải quyết,
sẽ có một khoảng thời gian trễ nhất định.
Bây giờ, làm thế nào để chúng ta đối phó với sự chậm trễ thời gian này ở phía thành phần của chúng ta?
Làm thế nào để chúng tôi giữ cho người dùng thông báo về thực tế là có
một sự chậm trễ thời gian liên quan đến trước khi dữ liệu có thể được lấy và hiển thị cho người dùng?
Làm thế nào để chúng ta đối phó với sự chậm trễ chính nó?
Bây giờ, trong bài tập này,
tôi sẽ mô phỏng sự chậm trễ thời gian bằng cách sử dụng một phương pháp JavaScript trong dịch vụ của tôi,
và sau đó cũng cập nhật các thành phần để có thể hiển thị một thông báo cho người dùng bằng cách sử dụng
các thành phần spinner tiến trình vật liệu góc để hiển thị một đĩa quay trong chế
độ xem mẫu để giữ cho người dùng thông báo về
thực tế là dữ liệu đang được lấy từ máy chủ,
và chúng tôi sẽ hiển thị trong chế độ xem ngay khi dữ liệu trở nên
có sẵn cho các thành phần khi lời hứa giải quyết.
Hãy xem làm thế nào chúng ta có thể làm điều đó trong bài tập này.
Một lần nữa, quay trở lại dịch vụ của tôi,
ở đây tôi có dịch vụ món ăn mở ở đây.
Thay vì có lời hứa
được giải quyết ngay lập tức, bây giờ chúng ta sẽ đưa ra một lời hứa và sau đó để
lời hứa được giải quyết sau một thời gian ngắn.
Vì vậy, để làm điều đó, quyết tâm hứa hẹn này sẽ không làm việc
nữa như được hiển thị ở đây vì vậy tôi sẽ xóa điều đó.
Thay vào đó, khi phương thức của tôi được gọi,
phương thức sẽ trả về một lời hứa bằng cách tạo ra một lời hứa mới.
Bạn nhớ lại rằng khi bạn tạo ra lời hứa mới,
bên trong lời hứa bạn sẽ có chức năng
với quyết tâm và từ chối như hai tham số.
Bây giờ, tôi sẽ chỉ sử dụng phần quyết tâm của nó.
Vì vậy, tôi sẽ thực hiện các chức năng bên trong lời hứa chỉ sử dụng một hàm mũi tên ở đây.
Vì vậy, tôi sẽ nói quyết tâm,
và tôi sẽ mô phỏng một sự chậm trễ ngắn cho độ phân giải này diễn ra.
Hãy để tôi viết một bình luận.
Mô phỏng độ trễ máy chủ với độ trễ hai giây.
Vậy, làm thế nào để chúng ta mô phỏng điều này?
Vì vậy, chúng tôi sử dụng phương pháp SetTimeout
có sẵn trong JavaScript.
Vì vậy, đối với phương pháp setTimeout, một
lần nữa, tôi sẽ thực hiện một hàm mũi tên,
phương pháp setTimeout không có bất kỳ tham số nào mà chúng ta cần ở đó.
Vì vậy, khi setTimeout này thực hiện,
sau đó nó sẽ giải quyết việc cung cấp DESS.
Vì vậy, hãy để tôi cắt DÂY DỰNG này và sau đó dán nó vào DÂY DỰNG.
Vì vậy, bạn thấy rằng kết quả này bây giờ là trả về kết quả ở đây,
và kết quả này sẽ được trả lại sau hai giây trì hoãn ở đây.
Với bản cập nhật này, lời hứa của chúng tôi bây giờ sẽ giải quyết sau hai giây.
Vì vậy, phương pháp setTimeout có sẵn trong JavaScript mô phỏng một sự chậm trễ ngắn.
Vì vậy, như bạn có thể thấy,
nó mô phỏng sự chậm trễ ngắn và có một cuộc gọi lại ở đây.
Gọi lại này như bạn có thể thấy,
Tôi đã thực hiện nó như là một chức năng mũi tên ở đây.
Vì vậy, không có tham số và sau đó khi điều này giải quyết,
nó sẽ giải quyết trả lại DESS và sự chậm trễ cho rằng là hai giây.
Vì vậy, phần này là chức năng,
và đây là sự chậm trễ thời gian mà chúng ta có ở đây.
Vì vậy, bây giờ, lời hứa của tôi sẽ giải quyết sau hai giây trì hoãn.
Tương tự như vậy, chúng ta hãy cập nhật hai phương pháp còn lại ở đây.
Vì vậy, để làm điều đó,
tôi sẽ sao chép
phần đó và sau đó chỉ cần dán nó vào đó,
và bạn sẽ nhận thấy rằng điều đó
sẽ và tôi cần phải nói 2000.
Vì vậy, điều đó hoàn thành phương pháp setTimeout có.
Bây giờ, chúng ta sẽ có
dấu ngoặc đơn đóng theo sau.
Tương tự như vậy, hãy để tôi cập nhật phương pháp cuối cùng cũng.
Vì vậy, bạn thấy rằng nó giải quyết các DESS,
và sau đó sau hai giây chậm trễ,
và đóng phương pháp đến đó.
Đó là nó. Vì vậy, bây giờ dịch vụ món ăn của tôi được
cập nhật để giải quyết tất cả các lời hứa sau hai giây chậm trễ.
Bây giờ, tương tự, cập nhật dịch vụ lãnh đạo và dịch
vụ khuyến mãi bằng cách sử dụng cùng một mẫu như tôi đã cho bạn thấy ở đây.
Phần thứ hai của câu hỏi là bằng cách nào đó giữ cho người dùng thông báo về
thực tế là có một sự chậm trễ thời gian liên quan đến việc có được kết quả,
và do đó chế độ xem sẽ cập nhật ngay sau khi kết quả thu được.
Bạn đã thấy loại hành vi này trong nhiều ứng dụng,
bao gồm cả các ứng dụng di động, nơi bạn sẽ có một spinner hiển thị trên màn hình để giữ cho
người dùng thông báo về thực tế là một cái gì đó đang được tải từ
phía sau hậu trường và khi kết quả trở nên có sẵn,
chế độ xem sẽ được cập nhật.
Vì vậy, chúng ta sẽ sử dụng một cách tiếp cận tương tự trong các thành phần của chúng ta.
Để giúp chúng tôi với điều này,
chúng tôi sẽ sử dụng thành phần spinner tiến bộ từ Vật liệu góc.
Vì vậy, để sử dụng các thành phần spinner tiến bộ,
trước tiên chúng ta hãy đi đến các
tập tin module.s ứng dụng và sau đó nhập các mô-đun spinner tiến bộ trong đó.
Vì vậy, đi đến ứng dụng module.t.
Đầu tiên chúng tôi sẽ đi lên đây để nhập khẩu
MatProgressSpinnerModule từ góc độ/vật liệu/tiến điểm-spinner.
Một khi chúng tôi đã nhập khẩu này vào tập tin,
sau đó chúng tôi sẽ đi vào trang trí mô-đun ng vào nhập khẩu,
và sau đó thêm vào MatProgressSpinnerModule vào đó.
Một khi chúng tôi hoàn thành điều này,
sau đó chúng tôi có thể cập nhật các thành phần để sử dụng các spinner tiến bộ.
Vì vậy, ở đây, tôi sẽ chỉ cho bạn một ví dụ bằng cách
minh họa cách chúng ta có thể cập nhật thành phần menu để hiển thị thông tin này.
Vì vậy, đi vào tập tin bố trí các thành phần trình đơn.
Ở đây, chúng ta thấy rằng chúng ta đang hiển thị menu bằng cách sử dụng danh sách lưới ở đây.
Vì vậy, những gì chúng ta sẽ làm là, cho div này,
tôi sẽ sử dụng chỉ thị NGIf và nói rằng điều này sẽ được hiển thị.
Menu chỉ nên được hiển thị khi các món ăn không phải là null.
Vì vậy, ban đầu, trong tập tin kịch bản tab thành phần của
bạn, bạn sẽ thấy rằng khi bạn đi đến tập tin kịch bản tab thành phần bạn sẽ thấy rằng các
món ăn của bạn hiện chỉ là một đối tượng chưa xác định ở đây,
và rằng các món ăn sẽ được gán cho giá trị món ăn chỉ khi các vấn đề giải quyết.
Vì vậy, cho đến thời điểm đó,
các món ăn sẽ là một giá trị không xác định.
Vì vậy, chúng ta có thể tận dụng lợi thế của thực tế đó,
và sau đó thiết kế lại mẫu của chúng tôi như vậy mà,
chúng ta sẽ nói cho thấy div này chỉ khi các món ăn không phải là một không xác định hoặc không phải là một đối tượng null.
Khi nó là không rõ,
sau đó tôi sẽ sử dụng một div thứ hai ở đây với các thuộc tính ẩn liên quan đến nó.
Vì vậy, bạn đã thấy ẩn được sử dụng trước đây.
Vì vậy, tôi sẽ sử dụng nó để xác định thân cây.
Vì vậy, những gì điều này có nghĩa là nếu các món ăn không phải là null,
sau đó div này sẽ được ẩn.
Nếu món ăn là null,
sau đó div này sẽ được hiển thị.
Vì vậy, bây giờ bạn thấy rằng bạn có hai divs ở đây.
Đầu tiên sẽ được hiển thị nếu các món ăn không phải là mảng đĩa null.
Nếu không, phần thứ hai sẽ được hiển thị.
Vì vậy, với sự thay đổi nhỏ này đối với mẫu của
tôi, tôi có thể ẩn menu cho đến khi mảng món ăn trở nên có sẵn cho tôi,
và khi mảng món ăn trở nên có sẵn,
sau đó tôi sẽ hiển thị menu.
Cho đến thời điểm đó, tôi sẽ cho thấy một mat-spinner. Đó
là spinner tiến độ chưa xác định
mà có sẵn như là một thành phần vật liệu góc cạnh.
Vì vậy, điều này sẽ hiển thị như một vòng tròn xoay trong quan
điểm của tôi, cho thành phần trình đơn này cho đến khi kết quả thu được,
khi các vấn đề giải quyết.
Ngoài ra, tôi cũng sẽ sử dụng h4, và trong h4,
tôi sẽ nói tải, xin vui lòng chờ đợi.
Vì vậy, những gì xảy ra là khi các món ăn chưa được giải quyết,
spinner và thông báo này sẽ được hiển thị trên màn hình.
Thời điểm các món ăn trở nên có sẵn khi kết quả đã hứa,
sau đó menu sẽ được hiển thị trên màn hình.
Bây giờ, chúng tôi sẽ cập nhật tương tự về thành phần,
thành phần nhà, và thành phần chi tiết món ăn cũng.
Tương ứng, chúng tôi sẽ cập nhật các dịch vụ lãnh đạo,
và các dịch vụ khuyến mãi cũng để mô phỏng sự chậm trễ thời gian.
Vì vậy, bằng cách sử dụng mô hình mà tôi vừa minh họa cho bạn,
tiếp tục và cập nhật các dịch vụ cũng như các mẫu tương ứng,
và chúng tôi sẽ thấy kết quả sau khi chúng tôi hoàn thành bản cập nhật.
Sau khi bạn hoàn thành các bản cập nhật của tất cả các dịch vụ và
các mẫu tương ứng cho các thành phần,
hãy để tôi nhanh chóng chạy bạn thông qua các tập tin cập nhật ở đây.
Vì vậy, đây là dịch vụ lãnh đạo.
Vì vậy, bạn có thể thấy rằng trong dịch vụ lãnh đạo,
tôi đã cập nhật các GetLeaders để sử dụng setTimeout chính xác như chúng tôi đã làm với các món ăn,
và GetLeader và GetFeaturedLeader cũng.
Tương tự như vậy, trong dịch vụ khuyến mãi,
chúng tôi đã cập nhật id GetPromotion GetPromotion và GetFeaturedPromotion cũng.
Vì vậy, ba dịch vụ bây giờ được cập nhật
để gây ra một thời gian chậm trễ trước khi họ trả lại kết quả.
Bây giờ, về mặt các mẫu,
chúng tôi đã cập nhật mẫu menu.component.
Hãy nhìn vào các mẫu home.components.
Vì vậy, trong nhà.component,
bạn nhận ra rằng khi chúng tôi thiết kế home.component,
chúng tôi đã cấu hình các thẻ với món ăn NGIf sao.
Vì vậy, tất cả những gì chúng ta cần làm là,
xuống dưới đây chúng ta thêm một div với
ẩn và món ăn ở đây nhưng spinner giống như chúng ta đã làm với menu.component.
Tương tự như vậy, đối với chương trình khuyến mãi mat-card đã có NGIF tại chỗ,
vì vậy chúng tôi chỉ cần thêm div bổ sung này ở đây với chương trình khuyến mãi ẩn ở đó,
và cũng cho các nhà lãnh đạo ở đây xuống dưới đây.
Tương tự như vậy, đi đến thành phần chi tiết món ăn.
Trong thành phần chi tiết món ăn,
chúng tôi đã có danh sách với món ăn NGIf cho các ý kiến.
Ngoài ra, món ăn NGIf cho thẻ hiển thị các chi tiết của món ăn.
Vì vậy, tất cả những gì chúng ta cần làm là thêm vào div mới này với các món ăn ẩn ở đây,
và div spinner tại chỗ.
Tương tự như vậy, trong thành phần về,
khi bạn đi vào thành phần về,
bạn sẽ thấy rằng chúng tôi có các nhà lãnh đạo công ty ở đây,
và chúng tôi đã có danh sách với các ngôi sao NGIf với các nhà lãnh đạo.
Vì vậy, tất cả những gì chúng ta cần làm là thêm vào div với
ẩn và các nhà lãnh đạo ở đây với một spinner tại chỗ. Đó là nó.
Ứng dụng của chúng tôi bây giờ đã được cập nhật.
Chúng ta hãy xem ứng dụng được cập nhật trong trình duyệt tiếp theo.
Đi đến trình duyệt,
bạn sẽ thấy rằng khi bạn cố gắng tải vào thành phần nhà,
có một khoảng thời gian ngắn khi bạn nhìn thấy máy quay trên
màn hình trước khi thẻ được nạp.
Tương tự như vậy, khi bạn đi đến menu.component,
bạn sẽ thấy spinner ở phía bên trái trong
hai giây trước khi menu thực tế được cập nhật,
và khi bạn đi đến một món ăn cá nhân cũng bạn thấy rằng
spinner trên màn hình trước khi các chi tiết của món ăn được hiển thị,
và trong về thành phần cũng tương tự, bạn sẽ thấy rằng,
bạn sẽ có vòng tròn quay ở đó trước khi thông tin của nhà lãnh đạo được cập nhật. Bất
cứ khi nào chúng tôi di chuyển đến bất kỳ trong số này,
bạn sẽ thấy một sự chậm trễ ngắn tương tự trước khi viêm được cập nhật trên màn hình.
Vì vậy, với điều này bạn thấy làm thế nào bạn có thể đối phó với sự chậm trễ trong việc có được kết quả,
hoặc chậm trễ trong lời hứa giải quyết từ phía dịch vụ trong thành phần của bạn
và giữ cho người dùng thông báo về thực tế là có
một sự chậm trễ ngắn trước khi màn hình được cập nhật.
Điều này hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã thấy làm thế nào chúng tôi có thể mô phỏng một sự chậm trễ ngắn với lời hứa của chúng tôi.
Nhận được giải quyết từ các dịch vụ,
và chúng tôi cũng thấy làm thế nào để giữ
cho người dùng thông báo bằng cách sử dụng các thành phần vật liệu góc quay MD để hiển thị trên màn hình trong
suốt thời gian khi kết quả chưa có sẵn,
đó là trong thời gian cho đến khi lời hứa được giải quyết.
Điều này hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với lời hứa thông điệp Phần hai.