From b4b72320b621eae9268110a5fde76aa01cef6f37 Mon Sep 17 00:00:00 2001 From: Sascha Schulz <sschulz@dh-software.de> Date: Do, 25 Mai 2023 11:11:25 +0200 Subject: [PATCH] add readme in plain txt format --- index.html | 201 ++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 178 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 622ff0d..88584f9 100644 --- a/index.html +++ b/index.html @@ -1565,28 +1565,6 @@ </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> @@ -1638,7 +1616,184 @@ </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> -- Gitblit v1.9.3