| | |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Lösung: Callback-Hell oder Pyramide des Todes |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | setTimeout(function() { |
| | | console.log("zweiter"); |
| | | |
| | | setTimeout(function() { |
| | | console.log("Text A"); |
| | | |
| | | setTimeout(function() { |
| | | console.log("Text B"); |
| | | |
| | | |
| | | }, 2000); |
| | | }, 2000); |
| | | }, 2000); |
| | | |
| | | console.log("erster"); |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Hilfsmittel: Promises |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Aufgabe: Implementiere die Funktion "delay", um die Promise-Kette lauffähig zu bekommen |
| | | Aufgabe: Implementiere die Funktion "delay" |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const delay = function() { |
| | | // implementieren |
| | | } |
| | | |
| | | console.log("erster"); |
| | | |
| | | delay(2000) |
| | | .then(function () { |
| | | console.log("zweiter"); |
| | | |
| | | return delay(2000); |
| | | }) |
| | | .then(function() { |
| | | console.log("Text A"); |
| | | |
| | | return delay(2000); |
| | | }) |
| | | .then(function() { |
| | | console.log("Text B"); |
| | | }) |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Lösung: |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const delay = function(ms) { |
| | | return new Promise(function(resolve, reject) { |
| | | setTimeout(function() { |
| | | resolve(); |
| | | }, ms); |
| | | }); |
| | | } |
| | | |
| | | console.log("erster"); |
| | | |
| | | delay(2000) |
| | | .then(function () { |
| | | console.log("zweiter"); |
| | | |
| | | return delay(2000); |
| | | }) |
| | | .then(function() { |
| | | console.log("Text A"); |
| | | |
| | | return delay(2000); |
| | | }) |
| | | .then(function() { |
| | | console.log("Text B"); |
| | | }) |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Rückgabewerte mit Promises |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const p = new Promise(function(resolve, reject) { |
| | | resolve("ok"); |
| | | }); |
| | | |
| | | p.then(function(value) { |
| | | console.log(value); |
| | | }); |
| | | </code> |
| | | </pre> |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | ok |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Fehlerbehandlung mit Promises |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const p = new Promise(function(resolve, reject) { |
| | | reject(new Error("Fehler")); |
| | | }); |
| | | |
| | | p |
| | | .then(function() { |
| | | console.log("Ich werde nicht aufgerufen") |
| | | }) |
| | | .catch(function(e) { |
| | | console.log(e.message); |
| | | }); |
| | | </code> |
| | | </pre> |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | Fehler |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Datei lesen mit NodeJS |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const fs = require("fs"); |
| | | |
| | | fs.readFile("./hello.txt", {encoding: "utf8"}, function(data) { |
| | | console.log(data); |
| | | }); |
| | | </code> |
| | | </pre> |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | Hello World! |
| | | |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Aufgabe: "Promisifiziere" analog zu "delay" in der letzten Aufgabe den Aufruf von fs.readFile() |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | const fs = require("fs"); |
| | | |
| | | function readFile() { |
| | | // implementieren |
| | | } |
| | | |
| | | readFile.then(function(content) { |
| | | console.log(content); |
| | | }); |
| | | </code> |
| | | </pre> |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | Hello World! |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Aufgabe: Nutze die vorherige Lösung nun für eine Promise-Kette, sodass die Inhalte der zwei Dateien "hello.txt" und "hallo.txt" nacheinander ausgegeben werden: |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | Hello World! |
| | | |
| | | Hallo Welt! |
| | | |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | <h3>Async - Await</h3> |
| | | <ul> |
| | | <li>Syntaktischer Zucker für Promises</li> |
| | | <li>Nutzung von <code>await</code> nur im Kontext einer <code>async</code>-Funktion möglich</li> |
| | | </ul> |
| | | <pre> |
| | | <code class="js" data-trim data-line-numbers> |
| | | async function wrapper() { |
| | | const p = new Promise(function(resolve, reject) { |
| | | resolve("Hello from Promise!"); |
| | | }); |
| | | |
| | | const result = await p; |
| | | |
| | | console.log(result); |
| | | } |
| | | |
| | | wrapper(); |
| | | </code> |
| | | </pre> |
| | | <pre> |
| | | <code class="bash" data-trim data-line-numbers> |
| | | Hello from Promise! |
| | | </code> |
| | | </pre> |
| | | </section> |
| | | <section> |
| | | Aufgabe: Schreibe die Lösung der vorherigen Aufgabe nach Async - Await um |
| | | </section> |
| | | </section> |
| | | </div> |