Rainer Stropek timecockpit.com

C#-Entwickler haben schon vor langer Zeit async/await kennen und lieben gelernt. Jetzt liefert Microsoft diesen Produktivitäts-Boost auch in TypeScript.

Meiner Ansicht nach versteht man Softwareentwicklungskonzepte am besten, wenn man sich klarmacht, welches Problem damit gelöst wird. Lassen Sie uns unsere Reise zu async/await damit beginnen. JavaScript-Entwicklung sowohl am Client als auch am Server hat viel mit asynchroner Programmierung zu tun. Wann immer I/O-Operationen ausgeführt werden sollen, hat man keine andere Wahl, als Funktionen asynchron aufzurufen. Auch wenn die Details sich von Fall zu Fall unterscheiden, das Grundkonzept ist immer das Gleiche: Man gibt im Funktionsaufruf eine Callback-Funktion an, die aufgerufen werden soll, wenn die Operation fertig ist. Das Problem dabei ist, dass die Struktur des Codes aufgrund der Callbacks nicht mehr dem Algorithmus entspricht, den man eigentlich programmieren möchte. Die technische Notwendigkeit der asynchronen Programmierung diktiert die Struktur des Codes. Dadurch wird er schwer zu lesen und zu warten.

Lassen Sie uns dieses Problem an einem Beispiel betrachten. Angenommen wir möchten den nachfolgenden, einfachen Algorithmus umsetzen:

  • Öffne Verbindung zur Datenbank
  • Lies alle Personen mit Vornamen „John“
  • Iteriere über alle ermittelten Personen
  • Wenn die aktuelle Person ein Kunde ist, lies die Kundendaten und gib Personen- und Kundendaten am Bildschirm aus
  • Wenn die aktuelle Person ein Lieferant ist, lies die Lieferantendaten und gib Personen- und Lieferantendaten am Bildschirm aus
  • Schließe die Datenbankverbindung

Diesen Algorithmus möchten wir mit TypeScript und Node.js programmieren. Als Datenbank verwenden wir exemplarisch MongoDB. Wenn Sie selbst mit dem in Folge gezeigten Code experimentieren wollen, können Sie ihn auf GitHub herunterladen.

import * as mongodb from 'mongodb';

// Open Database
mongodb.MongoClient.connect("mongodb://10.0.75.2:27017/demo", (err, db) => {
  // Read all persons with first name "John"
  db.collection("Person", (err, coll) => {
    coll.find({ firstName: "John" }).toArray((err, res) => {
      // In order to close DB after we are done, we have to use a counter
      var counter = res.length;
      var closedb = () => { if (--counter == 0) db.close(); };

      // For each person
      for (var i = 0; i < res.length; i++) { var p = res[i]; // If Person is customer if (p.isCustomer) { // Read customer details for person db.collection("Customer", (err, custColl) => {
            custColl.findOne({ id: p.customerId }, (err, cust) => {
              // Print person and customer details
              console.log(`John ${p.lastName} works for ${cust.customerName}.`);

              // Call helper function to close DB if done
              closedb();
            });
          });
        } else {
          // Read supplier details for person
          db.collection("Supplier", (err, supplColl) => {
            supplColl.findOne({ id: p.supplierId }, (err, suppl) => {
              // Print person and supplier details
              console.log(`John ${p.lastName} works for ${suppl.supplierName}.`);

              // Call helper function to close DB if done
              closedb();
            });
          });
        }
      }
    });
  });
});

„Callback Hell“

Listing 1 zeigt die Umsetzung unseres Algorithmus mit TypeScript ohne Verwendung von Frameworks wie Async oder async/await. Wie Sie sehen, wird bei jedem MongoDB-Aufruf eine Callback-Funktion angegeben. Der Code wird dadurch schwer verständlich. Man spricht daher auch von der „Callback Hell“. Bedenken Sie, dass unser Beispiel bewusst einfach gehalten ist. Echte Programme in der Praxis sind weitaus komplexer, das Problem wird dadurch noch verschärft. Ganze Webseiten widmen sich der Frage danach, wie man Code, der Callbacks intensiv verwendet, trotzdem noch halbwegs gut strukturieren kann. Aber auch diese Lösungen sind alles andere als optimal.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 10.16 - "TypeScript statt JavaScript"

Alle Infos zum Heft
263016TypeScript lernt async/await
X
- Gib Deinen Standort ein -
- or -