1 00:00:03,830 --> 00:00:09,840 Nach der kurzen Einführung in die Versprechungen in der vorherigen Vorlesung 2 00:00:09,840 --> 00:00:12,270 gehen wir zu unserer nächsten Übung, in 3 00:00:12,270 --> 00:00:15,235 der wir die Versprechen innerhalb unserer eckigen Anwendung nutzen werden. 4 00:00:15,235 --> 00:00:24,060 Insbesondere sind Versprechen wesentliche Mittel, um mit den Verzögerungen umzugehen, insbesondere wenn 5 00:00:24,060 --> 00:00:27,885 Sie auf die Daten von einem Server zugreifen und erhalten müssen, 6 00:00:27,885 --> 00:00:32,915 bevor Sie über Ihren Service an die Komponente geliefert werden. 7 00:00:32,915 --> 00:00:36,440 Daher geben Dienste oft Versprechen an 8 00:00:36,440 --> 00:00:41,050 die Komponenten zurück, wenn die Komponenten die Dienstmethoden aufrufen, 9 00:00:41,050 --> 00:00:43,490 und danach, wenn das Versprechen 10 00:00:43,490 --> 00:00:47,385 aufgelöst wird, haben die Komponenten die Ergebnisse für sie verfügbar. 11 00:00:47,385 --> 00:00:51,920 Wir werden die Dienste, die wir innerhalb 12 00:00:51,920 --> 00:00:55,970 unserer Winkelanwendung haben, neu konfigurieren, um 13 00:00:55,970 --> 00:00:58,550 Versprechen zurückzugeben, und dann werden wir 14 00:00:58,550 --> 00:01:02,390 unsere Komponenten neu konfigurieren, um mit den Versprechen umgehen zu können. 15 00:01:02,390 --> 00:01:10,925 Unser erster Schritt in dieser Übung besteht darin, alle Dienste neu zu konfigurieren, um Versprechen zurückzugeben. 16 00:01:10,925 --> 00:01:14,704 Also jede der Methoden innerhalb unseres Dienstes, anstatt 17 00:01:14,704 --> 00:01:18,500 den Wert sofort zurückzugeben, wird es Versprechen zurückgeben. 18 00:01:18,500 --> 00:01:21,685 Also, wie konfigurieren wir unsere Dienste, um Versprechen zurückzugeben? Wenn Sie 19 00:01:21,685 --> 00:01:26,635 also zur Datei dishservice.ts gehen, 20 00:01:26,635 --> 00:01:35,390 wird die GetDishs-Methode hier anstelle des Dish-Arrays ein Versprechen zurückgeben. 21 00:01:35,390 --> 00:01:38,840 Also konfigurieren wir die GetDishs-Methode, um 22 00:01:38,840 --> 00:01:43,695 Versprechen zurückzugeben, indem wir dieses Gericht Objekt in ein Versprechen einschließen. 23 00:01:43,695 --> 00:01:49,235 Was das bedeutet, ist, dass, wenn das Versprechen aufgelöst wird, das Ergebnis 24 00:01:49,235 --> 00:01:55,435 des GetDishs-Versprechens ein Gericht Array sein würde. 25 00:01:55,435 --> 00:01:59,164 Also, innerhalb Ihrer Komponente 26 00:01:59,164 --> 00:02:03,290 erhalten Sie das Dish-Array, wenn das Versprechen korrekt ist. 27 00:02:03,290 --> 00:02:07,845 Jetzt, da wir die GetDishes konfiguriert haben, um ein Versprechen zurückzugeben, 28 00:02:07,845 --> 00:02:10,370 müssen wir den Code neu konfigurieren 29 00:02:10,370 --> 00:02:14,735 , so dass dieses Geschirr Array als Teil eines Versprechens zurückgegeben wird. 30 00:02:14,735 --> 00:02:18,770 Jetzt, da wir das Ergebnis bereits zur Verfügung haben, 31 00:02:18,770 --> 00:02:22,190 werde ich die Shortcut-Methode verwenden, um das 32 00:02:22,190 --> 00:02:27,875 Versprechen zurückzugeben, indem ich das Versprechen sofort auflöse. 33 00:02:27,875 --> 00:02:34,720 Nun, offensichtlich funktioniert das gut, wenn Sie die Ergebnisse sofort bei Ihnen haben. 34 00:02:34,720 --> 00:02:38,120 Aber wenn Sie Ihren Dienst neu konfigurieren, um 35 00:02:38,120 --> 00:02:41,885 diese Daten von einem Server abrufen zu können, 36 00:02:41,885 --> 00:02:46,670 müssen wir diesen Code neu schreiben, um damit umzugehen, dass 37 00:02:46,670 --> 00:02:49,310 der Dienst das Ergebnis nicht 38 00:02:49,310 --> 00:02:52,875 sofort zurückgibt, sondern Sie müssen einige Zeit warten. 39 00:02:52,875 --> 00:02:54,430 In der nächsten Übung 40 00:02:54,430 --> 00:03:03,290 werden wir die Verzögerung mithilfe einer JavaScript-Methode simulieren, damit Sie 41 00:03:03,290 --> 00:03:12,875 ein Gefühl davon geben, was es bedeutet, mit Verzögerungen beim Empfangen eines Ergebnisses aus einem Versprechen umzugehen. Nachdem 42 00:03:12,875 --> 00:03:16,865 wir nun die GetDishes konfiguriert haben, um das Versprechen zurückzugeben, 43 00:03:16,865 --> 00:03:20,770 werden wir in ähnlicher Weise die verbleibenden beiden Methoden neu konfigurieren. 44 00:03:20,770 --> 00:03:24,890 Also werde ich dieses Versprechen von 45 00:03:24,890 --> 00:03:30,430 hier kopieren und dann einfach an die verbleibenden zwei dort anhängen, 46 00:03:30,430 --> 00:03:34,220 damit ich sie auch umwandeln werde, um 47 00:03:34,220 --> 00:03:37,100 Versprechen zurückzugeben, und dann 48 00:03:37,100 --> 00:03:40,225 sollte natürlich, was wir hier haben, in die Verheißungslösung eingeschlossen werden. 49 00:03:40,225 --> 00:03:43,129 Also werde ich nur die 50 00:03:43,129 --> 00:03:50,675 Versprechenserklärung kopieren und dies in die Entschlossenheit einschließen. 51 00:03:50,675 --> 00:04:00,080 In ähnlicher Weise werde ich für das vorgestellte Gericht dies in die Versprechensentscheidung einschließen. 52 00:04:00,080 --> 00:04:05,005 Jetzt ist mein Geschirrservice so konfiguriert, dass er Versprechen zurückgibt. 53 00:04:05,005 --> 00:04:07,610 Offensichtlich bedeutet dies auch, dass ich zu 54 00:04:07,610 --> 00:04:11,360 meinen Komponenten gehen und dann die Komponenten neu konfigurieren muss, um 55 00:04:11,360 --> 00:04:14,090 damit umzugehen, dass sie die Daten nicht 56 00:04:14,090 --> 00:04:17,720 sofort erhalten, anstatt sie ein Versprechen erhalten und dann 57 00:04:17,720 --> 00:04:21,200 die dann -Methode implementieren müssen 58 00:04:21,200 --> 00:04:25,550 , in der Das Versprechen, wenn es Ergebnisse, wird die Daten an Sie liefern. 59 00:04:25,550 --> 00:04:28,639 Also, jetzt, da wir den Geschirr-Service konfiguriert haben, 60 00:04:28,639 --> 00:04:35,020 wissen wir einen Ort, an dem der Service aktiv genutzt wird und das ist Menükomponente. 61 00:04:35,020 --> 00:04:37,730 Lassen Sie mich Ihnen zeigen, wie wir 62 00:04:37,730 --> 00:04:40,640 die Komponente neu konfigurieren, um mit dem Versprechen umgehen zu können. 63 00:04:40,640 --> 00:04:44,420 Also, wenn Sie auf die menucomponent.ts gehen Sie sofort 64 00:04:44,420 --> 00:04:49,984 bemerken, dass es eine rote zerquetschige Linie unter Geschirr, weil, 65 00:04:49,984 --> 00:04:51,880 wie Sie sehen, jetzt, 66 00:04:51,880 --> 00:04:58,875 die dishservice.GetDishes wird ein Versprechen zurückgeben und dann hier haben Sie, 67 00:04:58,875 --> 00:05:05,660 das Versprechen zu einem Gericht Array-Objekt zugeordnet und das ist nicht korrekt. 68 00:05:05,660 --> 00:05:08,005 Wie konfigurieren wir diesen Code neu? 69 00:05:08,005 --> 00:05:11,440 Also, wie ich bereits erwähnt habe, 70 00:05:11,440 --> 00:05:16,100 müssen wir, wenn wir den Code neu konfigurieren, das Dann und den Fang für die GetDishes implementieren. 71 00:05:16,100 --> 00:05:20,820 Lassen Sie mich also voran gehen und nur dann in diesem Moment 72 00:05:20,820 --> 00:05:27,360 für die GetDishs-Methode implementieren, weil der Fang später implementiert werden kann. Im 73 00:05:27,360 --> 00:05:31,190 Moment wissen wir, dass das Versprechen immer richtig aufgelöst 74 00:05:31,190 --> 00:05:33,665 wird, also werden wir die dann Methode hier implementieren, 75 00:05:33,665 --> 00:05:36,645 und dann, innerhalb der damaligen Methode, 76 00:05:36,645 --> 00:05:46,650 werde ich das Geschirr Objekt erhalten, das hereinkommt, wenn sich das Versprechen auflöst. 77 00:05:46,650 --> 00:05:50,400 Und wenn das Geschirr Objekt als Parameter kommt, 78 00:05:50,400 --> 00:05:53,190 so dass Sie sehen, dass ich hier eine Pfeilfunktion schreibe, 79 00:05:53,190 --> 00:06:03,120 werde ich das einfach ausschneiden und das direkt dort einschließen. 80 00:06:03,170 --> 00:06:09,510 Da gehst du hin. Auf diese Weise kann Ihre Komponente nun 81 00:06:09,510 --> 00:06:16,775 das Versprechen ergreifen und dann die Ergebnisse abrufen, wenn die Zusage gelöst wird. 82 00:06:16,775 --> 00:06:21,575 Sie können sehen, dass wir den DishService GetDishes haben und dann die dann Methode 83 00:06:21,575 --> 00:06:26,560 ändern und wobei, wenn das dann aufgerufen wird, 84 00:06:26,560 --> 00:06:28,880 wenn das Versprechen von der anderen Seite aufgelöst 85 00:06:28,880 --> 00:06:33,635 wird, dann werden die Gerichte an Sie geliefert, weil die GetDishs-Methode 86 00:06:33,635 --> 00:06:38,450 ein Versprechen zurückgibt, aber das Ergebnis wird ein Gericht Array. Dieses 87 00:06:38,450 --> 00:06:42,320 Gericht Array kommt hier als Parameter, also schreibe ich 88 00:06:42,320 --> 00:06:46,880 hier eine Pfeilfunktion, wo ich das Geschirr Geschirr zuweise. 89 00:06:46,880 --> 00:06:49,880 Also, wenn dieses Versprechen aufgelöst wird, 90 00:06:49,880 --> 00:06:53,930 werden die Gerichte diesem Geschirr zugewiesen. Das war's. 91 00:06:53,930 --> 00:06:57,455 Jetzt ist meine Menükomponente bereit, mit dem Versprechen fertig zu werden. Um 92 00:06:57,455 --> 00:07:01,715 mit dem Fehler fertig zu werden, müssen Sie natürlich auch 93 00:07:01,715 --> 00:07:06,130 die catch-Methode in die GetDishs-Methode verketten. 94 00:07:06,130 --> 00:07:08,390 Also, das Dann und der Catch sind Methoden, 95 00:07:08,390 --> 00:07:11,540 die das Versprechen für Sie bereitstellt, und so implementieren Sie das und innerhalb 96 00:07:11,540 --> 00:07:16,790 derer Sie die Funktion bereitstellen, die sich mit 97 00:07:16,790 --> 00:07:23,355 der Situation befasst, wenn das Versprechen aufgelöst wird oder wenn das Versprechen mit einem Fehler ablehnt. 98 00:07:23,355 --> 00:07:28,850 In ähnlicher Weise sollten wir nun die Methode des Gerichtes 99 00:07:28,850 --> 00:07:33,890 und auch die Home-Komponente neu konfigurieren, um mit der Tatsache umzugehen, dass 100 00:07:33,890 --> 00:07:44,520 der DishService jetzt Versprechen liefert, anstatt die Werte sofort zu liefern. 101 00:07:44,520 --> 00:07:46,470 Während wir dabei sind, 102 00:07:46,470 --> 00:07:51,305 könnten wir ebenso gut sowohl den Führer als auch den Promotion-Dienst neu konfigurieren. 103 00:07:51,305 --> 00:07:55,100 Also werde ich es als eine Übung für Sie überlassen, um 104 00:07:55,120 --> 00:07:59,930 sowohl den Führungsdienst als auch den Promotionsdienst zu aktualisieren, um 105 00:07:59,930 --> 00:08:05,180 die entsprechenden Versprechungen zu erfüllen. 106 00:08:05,180 --> 00:08:09,379 Folglich müssen Sie auch 107 00:08:09,379 --> 00:08:18,785 den Komponentententyp-Skriptcode in der Komponente „about“ in der Komponente „Dish Detail“ 108 00:08:18,785 --> 00:08:23,360 in der Home-Komponente neu konfigurieren, um mit der Tatsache umzugehen, dass Sie 109 00:08:23,360 --> 00:08:27,950 jetzt Versprechen anstatt der tatsächlichen Ergebnisse erhalten. 110 00:08:27,950 --> 00:08:34,005 Also werde ich Sie dieses Teil vervollständigen lassen, anstatt all das im Detail zu veranschaulichen. 111 00:08:34,005 --> 00:08:37,620 Ich habe Ihnen einen Schritt mit der Komponente „Detail“ gezeigt. 112 00:08:37,620 --> 00:08:42,380 Führen Sie die Schritte sowohl mit dem Leader als auch mit dem Promotion-Dienst aus, 113 00:08:42,380 --> 00:08:45,890 und konfigurieren Sie dann die entsprechenden Komponenten entsprechend. 114 00:08:45,890 --> 00:08:50,275 Lassen Sie mich Sie schnell durch die Updates führen, die Sie abschließen müssen. 115 00:08:50,275 --> 00:08:56,365 So, wie Sie sehen, die Führungskräfte Dienst Ich habe bereits mit dem Versprechen aktualisiert. 116 00:08:56,365 --> 00:08:57,585 Wie Sie hier sehen können, 117 00:08:57,585 --> 00:09:00,410 wurden alle Methoden jetzt aktualisiert, um 118 00:09:00,410 --> 00:09:04,800 Versprechen zurückzugeben, genau wie wir es mit dem DishService getan haben. 119 00:09:04,800 --> 00:09:08,420 In ähnlicher Weise wurden auch die Werbedienste aktualisiert, um 120 00:09:08,420 --> 00:09:12,660 Versprechungen von allen Methoden dort zurückzugeben. 121 00:09:12,660 --> 00:09:16,560 Nun, auf die über Komponente gehen, 122 00:09:16,560 --> 00:09:22,160 würden Sie sehen, dass in der über Komponente auch wir konfiguriert haben, um 123 00:09:22,160 --> 00:09:28,790 die Werte innerhalb der dann des Versprechens dort zu erhalten. 124 00:09:28,790 --> 00:09:33,560 In ähnlicher Weise würden Sie in der Dish-Detailkomponente feststellen, dass ich 125 00:09:33,560 --> 00:09:39,765 dies neu konfiguriert habe, um mit dem Versprechen dort umzugehen. 126 00:09:39,765 --> 00:09:43,495 In ähnlicher Weise 127 00:09:43,495 --> 00:09:46,190 würden Sie in der Home-Komponente feststellen, dass innerhalb der Home-Komponente 128 00:09:46,190 --> 00:09:51,740 alle drei Methoden hier: GetFeaturedDish, 129 00:09:51,740 --> 00:09:54,650 FeaturedPromotion und FeaturedLeader aktualisiert wurden, wobei 130 00:09:54,650 --> 00:09:59,330 die jeweils angehängt sind, um mit dem Versprechen umzugehen. 131 00:09:59,330 --> 00:10:06,355 Der Code ist ziemlich ähnlich dem, was ich mit der Menükomponente illustriert habe. 132 00:10:06,355 --> 00:10:08,570 Sobald Sie dies abgeschlossen haben, 133 00:10:08,570 --> 00:10:12,995 lassen Sie uns einen kurzen Blick auf unsere Anwendung werfen. Wenn Sie 134 00:10:12,995 --> 00:10:15,665 zu unserer Anwendung im Browser gehen, 135 00:10:15,665 --> 00:10:18,870 werden Sie keinen Unterschied in der Anwendung sehen. 136 00:10:18,870 --> 00:10:21,409 Es funktioniert genau auf die gleiche Weise wie zuvor, 137 00:10:21,409 --> 00:10:26,385 außer jetzt verwendet es Versprechen, wenn 138 00:10:26,385 --> 00:10:29,615 die Dienste implementiert sind und Ihre Komponenten 139 00:10:29,615 --> 00:10:33,080 mit den Versprechen umgehen, wenn sie gelöst werden. 140 00:10:33,080 --> 00:10:36,530 So funktioniert die Menükomponente korrekt und 141 00:10:36,530 --> 00:10:40,440 auch die Gericht-Detailkomponente funktioniert auch korrekt. 142 00:10:40,440 --> 00:10:43,150 Damit schließen wir diese Übung ab. 143 00:10:43,150 --> 00:10:49,130 In dieser Übung haben wir gesehen, wie wir unsere Dienstleistungen verbessern konnten, um 144 00:10:49,130 --> 00:10:55,990 Versprechen zu liefern, und wir haben auch unsere Komponenten aktualisiert, um mit Versprechen umgehen zu können. 145 00:10:55,990 --> 00:10:58,710 Damit ist diese Übung abgeschlossen. 146 00:10:58,710 --> 00:11:06,300 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht „Promise part one“ zu machen.