1 00:00:01,340 --> 00:00:03,150 ‫Kursleiter: Lassen Sie uns 2 00:00:03,150 --> 00:00:06,643 ‫nun über eine erstaunliche asynchrone JavaScript-Funktion namens async/await sprechen. 3 00:00:08,040 --> 00:00:11,023 ‫Versprechen hat unseren Code also schon viel besser gemacht, 4 00:00:11,023 --> 00:00:13,340 ‫aber wir können noch besser werden. 5 00:00:13,340 --> 00:00:16,400 ‫Anstatt Versprechungen zu verbrauchen, können wir mit der Methode 6 00:00:16,400 --> 00:00:19,380 ‫then, die uns immer noch alle diese Rückruffunktionen verwenden 7 00:00:19,380 --> 00:00:21,440 ‫lässt, etwas namens async/await verwenden. 8 00:00:21,440 --> 00:00:25,040 ‫Dies ist ein neues Feature, das in ES8 in JavaScript eingeführt 9 00:00:25,040 --> 00:00:27,710 ‫wurde und unser Leben viel einfacher machen wird. 10 00:00:27,710 --> 00:00:29,370 ‫Wenn wir also Code 11 00:00:29,370 --> 00:00:32,020 ‫schreiben, werden wir normalerweise die ganze Zeit Versprechen 12 00:00:32,020 --> 00:00:34,380 ‫konsumieren, aber normalerweise nicht so viel produzieren. 13 00:00:34,380 --> 00:00:38,510 ‫Async/await macht das viel einfacher. 14 00:00:38,510 --> 00:00:40,070 ‫Um nun async/await verwenden 15 00:00:40,070 --> 00:00:42,623 ‫zu können, müssen wir eine sogenannte async-Funktion erstellen. 16 00:00:44,610 --> 00:00:47,570 ‫Lassen Sie uns diesen Teil also hier auskommentieren, damit 17 00:00:47,570 --> 00:00:50,520 ‫wir ihn nicht ganz verlieren, falls Sie ihn 18 00:00:50,520 --> 00:00:53,170 ‫hier als Referenz oder so behalten möchten. 19 00:00:55,240 --> 00:01:00,000 ‫getDogPic ist also die Funktion, die wir schreiben werden. 20 00:01:00,000 --> 00:01:02,210 ‫Und jetzt müssen wir diese Funktion 21 00:01:02,210 --> 00:01:04,350 ‫als asynchrone Funktion markieren. 22 00:01:04,350 --> 00:01:05,883 ‫Also verwenden wir 23 00:01:07,840 --> 00:01:11,390 ‫hier async und erstellen dann die Funktion wie gewohnt. 24 00:01:11,390 --> 00:01:14,260 ‫Dieses async-Schlüsselwort hier bedeutet also einfach, dass 25 00:01:14,260 --> 00:01:17,430 ‫dies eine spezielle Funktion ist, die asynchron ist. 26 00:01:17,430 --> 00:01:19,780 ‫Im Grunde also eine, die im Hintergrund 27 00:01:19,780 --> 00:01:22,350 ‫weiterläuft, während der darin enthaltene Code ausgeführt wird, 28 00:01:22,350 --> 00:01:25,540 ‫während der Rest des Codes in der Ereignisschleife ausgeführt wird. 29 00:01:25,540 --> 00:01:28,680 ‫Diese asynchronen Funktionen werden also asynchron 30 00:01:28,680 --> 00:01:31,873 ‫arbeiten, ohne jemals die Ereignisschleife zu blockieren, okay? 31 00:01:31,873 --> 00:01:33,980 ‫Diese asynchrone Funktion gibt auch automatisch 32 00:01:33,980 --> 00:01:35,490 ‫ein Promise zurück. 33 00:01:35,490 --> 00:01:37,723 ‫Aber dazu etwas später in diesem Video mehr. 34 00:01:38,840 --> 00:01:40,610 ‫Im Moment ist es wirklich 35 00:01:40,610 --> 00:01:44,200 ‫wichtig zu wissen, dass wir in einer asynchronen Funktion immer 36 00:01:44,200 --> 00:01:46,420 ‫einen oder mehrere Wait-Ausdrücke haben können, 37 00:01:46,420 --> 00:01:48,000 ‫und so funktionieren sie. 38 00:01:48,000 --> 00:01:50,453 ‫Also verwenden wir hier await und dann das Promise. 39 00:01:51,540 --> 00:01:55,690 ‫Fangen wir also damit an, okay? 40 00:01:55,690 --> 00:02:00,320 ‫Und dann können wir das Ergebnis davon in einer Variablen speichern. 41 00:02:00,320 --> 00:02:01,800 ‫In diesem Fall Daten. 42 00:02:01,800 --> 00:02:05,470 ‫Okay, und das hier wird dann dasselbe sein, als 43 00:02:05,470 --> 00:02:08,080 ‫ob Sie dieses Stück Code haben. 44 00:02:08,080 --> 00:02:10,190 ‫Schauen wir uns also an, was hier passiert. 45 00:02:10,190 --> 00:02:13,060 ‫Dieses Warten hier wird also im Grunde 46 00:02:13,060 --> 00:02:17,680 ‫die Ausführung des Codes an dieser Stelle stoppen, bis dieses Versprechen gelöst ist. 47 00:02:17,680 --> 00:02:19,960 ‫Wenn nun das Promise erfüllt 48 00:02:19,960 --> 00:02:22,490 ‫ist, was sich daran erinnert, dass 49 00:02:22,490 --> 00:02:24,660 ‫es erfolgreich war, dann 50 00:02:24,660 --> 00:02:27,540 ‫ist der Wert des Wait-Ausdrucks der aufgelöste 51 00:02:27,540 --> 00:02:32,280 ‫Wert des Promise, der dann schließlich der Datenvariablen zugewiesen wird, okay? 52 00:02:32,280 --> 00:02:34,500 ‫Anstatt also das Promise und dann die 53 00:02:34,500 --> 00:02:36,300 ‫Methode then darauf zu 54 00:02:36,300 --> 00:02:39,120 ‫haben, die dann die Daten als Argument erhält. 55 00:02:39,120 --> 00:02:41,560 ‫Mit async/await ist es viel einfacher. 56 00:02:41,560 --> 00:02:45,400 ‫Alles, was wir tun, ist, den Code hier im Grunde daran zu 57 00:02:45,400 --> 00:02:47,960 ‫hindern, bei diesem Versprechen zu laufen, zu warten, 58 00:02:47,960 --> 00:02:52,330 ‫bis er mit seinem Wert zurückkommt, und diesen Wert dann in einer Variablen zu speichern. 59 00:02:52,330 --> 00:02:54,230 ‫Und so ist der Code 60 00:02:54,230 --> 00:02:56,490 ‫noch einfacher zu verstehen als zuvor. 61 00:02:56,490 --> 00:02:58,600 ‫Und das ist der 62 00:02:58,600 --> 00:03:02,220 ‫springende Punkt von async/await: Es soll unseren Code eher 63 00:03:02,220 --> 00:03:04,910 ‫wie synchronen Code aussehen lassen, während er 64 00:03:04,910 --> 00:03:08,200 ‫hinter den Kulissen tatsächlich noch asynchron ist, okay? 65 00:03:08,200 --> 00:03:12,810 ‫Also lass uns damit weitermachen und einfach die Teile aus 66 00:03:12,810 --> 00:03:17,060 ‫diesem Beispiel vorher in das neue kopieren, okay? 67 00:03:17,060 --> 00:03:22,010 ‫Vorher hatten wir also unser Versprechen, dann unseren damaligen Handler und dann haben 68 00:03:22,010 --> 00:03:24,750 ‫wir die Daten auf der Konsole protokolliert. 69 00:03:24,750 --> 00:03:26,380 ‫Genau das haben wir 70 00:03:26,380 --> 00:03:29,160 ‫also hier, nur auf eine andere Art und Weise. 71 00:03:29,160 --> 00:03:31,240 ‫Wir bekommen also unsere Daten in die Variable 72 00:03:31,240 --> 00:03:33,110 ‫gespeichert und protokollieren sie dann hier. 73 00:03:33,110 --> 00:03:37,210 ‫Als nächstes holen wir uns dann das Hundebild von der API. 74 00:03:37,210 --> 00:03:42,210 ‫Wir haben also die res-Variable, also wird das diese sein. 75 00:03:42,260 --> 00:03:44,570 ‫Also wieder das Ergebnis des Then-Handlers 76 00:03:46,660 --> 00:03:50,693 ‫und wir warten hier auf dieses Versprechen, um mit den Daten zurückzukommen. 77 00:03:53,250 --> 00:03:55,443 ‫Ich hoffe, das macht jetzt Sinn. 78 00:04:00,180 --> 00:04:04,180 ‫Danach protokollieren wir dies in der Konsole, also 79 00:04:04,180 --> 00:04:06,440 ‫das Ergebnis dieses API-Aufrufs. 80 00:04:06,440 --> 00:04:09,250 ‫Und schließlich verwenden wir unser letztes Versprechen, 81 00:04:09,250 --> 00:04:12,430 ‫um diesen String in eine Datei zu schreiben. 82 00:04:12,430 --> 00:04:15,260 ‫Das ist also dieses Versprechen 83 00:04:15,260 --> 00:04:19,110 ‫hier, und dieses löst keinen sinnvollen Wert auf. 84 00:04:19,110 --> 00:04:22,570 ‫Wir müssen also nicht einmal etwas in einer Variablen speichern. 85 00:04:22,570 --> 00:04:25,050 ‫Alles, was wir tun, ist, den 86 00:04:25,050 --> 00:04:28,080 ‫Code hier zu stoppen, bis dieser Schreibprozess abgeschlossen ist. 87 00:04:28,080 --> 00:04:30,580 ‫Und dann loggen Sie diese Zeichenfolge in 88 00:04:32,690 --> 00:04:34,003 ‫die Konsole ein. 89 00:04:35,561 --> 00:04:39,270 ‫Wenn Sie also diesen Code mit dem vergleichen, was wir 90 00:04:39,270 --> 00:04:41,640 ‫vorher hatten, sieht das viel 91 00:04:41,640 --> 00:04:45,170 ‫sauberer und viel einfacher zu verstehen aus, nicht wahr? 92 00:04:45,170 --> 00:04:47,300 ‫Damit dies funktioniert, 93 00:04:47,300 --> 00:04:50,520 ‫müssen wir nur diese Funktion hier aufrufen. 94 00:04:50,520 --> 00:04:54,080 ‫Speichern Sie es und tatsächlich funktioniert es immer noch. 95 00:04:54,080 --> 00:04:56,700 ‫Wir bekommen also immer noch unser Ergebnis. 96 00:04:56,700 --> 00:04:58,830 ‫Es funktioniert immer noch alles gleich. 97 00:04:58,830 --> 00:05:00,570 ‫Das ist also erstaunlich, oder? 98 00:05:00,570 --> 00:05:02,560 ‫Nur eine letzte Sache, die wir hier 99 00:05:02,560 --> 00:05:04,170 ‫tun müssen, ist unsere Fehlerbehandlung. 100 00:05:04,170 --> 00:05:08,080 ‫Denn im Moment behandeln wir nirgendwo Fehler, oder? 101 00:05:08,080 --> 00:05:10,750 ‫Also hier unten haben wir die Fangmethode 102 00:05:10,750 --> 00:05:12,650 ‫verwendet, aber im Moment 103 00:05:12,650 --> 00:05:15,260 ‫können wir das nirgendwo richtig anbringen, oder? 104 00:05:15,260 --> 00:05:16,920 ‫Stattdessen verwenden 105 00:05:16,920 --> 00:05:20,130 ‫wir hier etwas namens Try-Catch. 106 00:05:20,130 --> 00:05:22,860 ‫Und eigentlich hat das nichts mit async/await zu 107 00:05:22,860 --> 00:05:25,180 ‫tun, es ist eine Standard-JavaScript-Funktion. 108 00:05:25,180 --> 00:05:26,853 ‫Also lass mich dir zeigen, wie es funktioniert. 109 00:05:28,130 --> 00:05:32,593 ‫Also packen wir im Grunde unseren gesamten Code in einen try-Block. 110 00:05:34,150 --> 00:05:35,500 ‫Im Grunde wird der 111 00:05:35,500 --> 00:05:38,340 ‫Code also versuchen, alles auszuführen, was hier drin ist. 112 00:05:38,340 --> 00:05:41,240 ‫Und dann brauchen wir auch noch einen catch-Block, 113 00:05:41,240 --> 00:05:44,780 ‫der Zugriff auf einen Fehler hat, falls einer vorhanden ist. 114 00:05:44,780 --> 00:05:47,950 ‫Wenn also in diesem Block hier ein Fehler auftritt, 115 00:05:47,950 --> 00:05:49,960 ‫wird dieser Block sofort 116 00:05:49,960 --> 00:05:52,060 ‫verlassen, dieser Try-Block hier, also dieser. 117 00:05:52,060 --> 00:05:55,070 ‫Gehen Sie sofort in den catch-Block und geben 118 00:05:55,070 --> 00:05:57,290 ‫Sie uns Zugriff auf den Fehler, 119 00:05:57,290 --> 00:05:59,323 ‫der im try-Block aufgetreten ist. 120 00:06:00,760 --> 00:06:04,227 ‫Jetzt müssen wir nur noch dieses Stück Code für 121 00:06:04,227 --> 00:06:06,510 ‫dieses Konsolenprotokoll nehmen, es hier 122 00:06:06,510 --> 00:06:09,163 ‫ablegen, es speichern und jetzt funktioniert es. 123 00:06:10,320 --> 00:06:11,460 ‫Um jetzt einen 124 00:06:11,460 --> 00:06:14,120 ‫Fehler zu verursachen, ändern wir diesen hier noch einmal. 125 00:06:14,120 --> 00:06:16,970 ‫Und tatsächlich konnte ich diese Datei nicht finden. 126 00:06:16,970 --> 00:06:20,040 ‫Also dieses Versprechen hier abgelehnt, oder? 127 00:06:20,040 --> 00:06:23,290 ‫Also dieses Versprechen, es wurde abgelehnt und es gab einen 128 00:06:23,290 --> 00:06:26,960 ‫Fehler und es kam sofort in den Catch-Block und hat diesen 129 00:06:26,960 --> 00:06:29,253 ‫Fehler dann in der Konsole protokolliert. 130 00:06:31,610 --> 00:06:32,443 ‫Leg es zurück. 131 00:06:34,040 --> 00:06:36,930 ‫Und jetzt funktioniert es tatsächlich wieder. 132 00:06:36,930 --> 00:06:39,930 ‫Okay, so funktioniert async/await. 133 00:06:39,930 --> 00:06:42,420 ‫Denken Sie also daran, dass wir await nur verwenden können, 134 00:06:42,420 --> 00:06:44,450 ‫wenn es sich in einer asynchronen Funktion befindet. 135 00:06:44,450 --> 00:06:46,880 ‫Aus diesem Grund wird es immer zusammen aufgerufen, also 136 00:06:46,880 --> 00:06:49,270 ‫warten Sie immer auf einen asynchronen Schrägstrich. 137 00:06:49,270 --> 00:06:53,070 ‫Denn diese beiden Eigenschaften gehören eng zusammen. 138 00:06:53,070 --> 00:06:54,835 ‫Um es kurz 139 00:06:54,835 --> 00:06:57,260 ‫zusammenzufassen: async/await ermöglicht es uns, anstatt 140 00:06:57,260 --> 00:06:59,270 ‫all diese Then-Handler mit 141 00:06:59,270 --> 00:07:01,630 ‫diesen Callback-Funktionen darin zu haben. 142 00:07:01,630 --> 00:07:05,590 ‫Es ermöglicht uns, unseren Code synchroner aussehen zu lassen. 143 00:07:05,590 --> 00:07:09,180 ‫Alles, was wir tun, ist, das Schlüsselwort await vor 144 00:07:09,180 --> 00:07:11,340 ‫unserem Versprechen zu verwenden. 145 00:07:11,340 --> 00:07:13,380 ‫Und dann wird es warten, bis dieses 146 00:07:13,380 --> 00:07:15,400 ‫Versprechen mit seinem Ergebnis zurückkommt. 147 00:07:15,400 --> 00:07:17,000 ‫Denken Sie daran, dass dies 148 00:07:17,000 --> 00:07:19,360 ‫das ist, was wir syntaktischen Zucker für Versprechen nennen. 149 00:07:19,360 --> 00:07:22,650 ‫Es lässt Versprechen also einfach schöner aussehen, aber hinter den 150 00:07:22,650 --> 00:07:25,610 ‫Kulissen funktioniert immer noch alles gleich mit der 151 00:07:25,610 --> 00:07:28,470 ‫Versprechen-Logik, die ich Ihnen zuvor erklärt habe. 152 00:07:28,470 --> 00:07:30,240 ‫Dies wiederum dient nur dazu, unser 153 00:07:30,240 --> 00:07:32,750 ‫Leben beim Codieren etwas einfacher zu machen und unseren 154 00:07:32,750 --> 00:07:35,520 ‫Code ein bisschen mehr wie synchroner Code aussehen zu lassen. 155 00:07:35,520 --> 00:07:37,430 ‫So implementieren wir async/await. 156 00:07:37,430 --> 00:07:38,810 ‫Im nächsten Video 157 00:07:38,810 --> 00:07:42,863 ‫erfahren wir etwas mehr darüber, wie Async-Funktionen tatsächlich funktionieren.