Asynchrone Programmierung in TypeScript: vollständiger Leitfaden

Einführung in die asynchrone Programmierung in TypeScript

Moderne Webentwicklung ist ohne asynchrone Programmierung nicht denkbar. Ob API-Anfragen, Arbeit mit dem Dateisystem oder Timer — all diese Operationen erfordern eine nicht-blockierende Codeausführung. TypeScript bietet als Obermenge von JavaScript leistungsstarke Werkzeuge für die Arbeit mit Asynchronität, indem es strenge Typisierung und verbesserte Code-Lesbarkeit hinzufügt.

In diesem Leitfaden werden wir alle Aspekte der asynchronen Programmierung in TypeScript gründlich untersuchen: vom grundlegenden Promise bis zu fortgeschrittenen Mustern mit async/await und paralleler Aufgabenausführung.

1. Grundlagen von Promise in TypeScript

Was ist ein Promise?

Ein Promise ist ein Objekt, das das Ergebnis einer asynchronen Operation darstellt. Es kann sich in einem von drei Zuständen befinden:

• Pending — Ausgangszustand, die Operation ist noch nicht abgeschlossen.
• Fulfilled — Die Operation wurde erfolgreich abgeschlossen.
• Rejected — Die Operation wurde mit einem Fehler abgeschlossen.

Erstellen eines Promise mit Typisierung

TypeScript ermöglicht es Ihnen, die Rückgabewerte eines Promise streng zu typisieren. Betrachten wir ein Beispiel:

// Function returning a Promise with a data typefunction fetchUserData(userId: number): Promise<User> {    return new Promise<User>((resolve, reject) => {        setTimeout(() => {            const user: User = {                id: userId,                name: 'Ivan Ivanov',                email: 'ivan@example.com'            };                        if (userId > 0) {                resolve(user);            } else {                reject(new Error('Invalid user ID'));            }        }, 1000);    });}

// Interface for data typinginterface User {    id: number;    name: string;    email: string;}

// Using the PromisefetchUserData(1)    .then((user: User) => {        console.log(`User: ${user.name}`);    })    .catch((error: Error) => {        console.error(`Error: ${error.message}`);    });

Promise-Verkettung

Promises können für die sequentielle Ausführung asynchroner Operationen miteinander verkettet werden:

function getUserPosts(userId: number): Promise<string[]> {    return new Promise((resolve) => {        setTimeout(() => resolve(['Post 1', 'Post 2', 'Post 3']), 500);    });}

function getPostComments(postTitle: string): Promise<string[]> {    return new Promise((resolve) => {        setTimeout(() => resolve(['Comment 1', 'Comment 2']), 300);    });}

// Promise ChainfetchUserData(1)    .then((user) => {        console.log(`User found: ${user.name}`);        return getUserPosts(user.id);    })    .then((posts) => {        console.log(`Posts found: ${posts.length}`);        return getPostComments(posts[0]);    })    .then((comments) => {        console.log(`Comments on the first post: ${comments.length}`);    })    .catch((error) => {        console.error('An error occurred:', error);    });

2. Async/Await — Ein moderner Ansatz

Async/Await-Syntax

Die Schlüsselwörter async und await lassen asynchronen Code wie synchronen Code aussehen, was die Lesbarkeit erheblich verbessert. Eine mit async markierte Funktion gibt immer ein Promise zurück.

// Async function with typed return valueasync function loadUserProfile(userId: number): Promise<UserProfile> {    try {        const user = await fetchUserData(userId);        const posts = await getUserPosts(userId);                return {            user,            posts,            lastLogin: new Date()        };