TypeScript 学习笔记（五）：异步编程与错误处理

1. 引言

在前几篇学习笔记中，我们介绍了 TypeScript 的基础知识、高级类型系统、模块与命名空间以及装饰器和高级编程技巧。本篇将重点探讨 TypeScript 中的异步编程与错误处理，帮助你在实际项目中更好地处理异步操作和错误。

2. 异步编程

异步编程是现代 JavaScript 应用程序的核心。TypeScript 完全支持 ES6+ 的异步编程特性，包括回调、Promise 和 async/await。

2.1 回调

回调函数是最基本的异步编程模式。

function fetchData(callback: (data: string) => void) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

虽然回调函数简单，但容易导致回调地狱（callback hell），使代码难以维护。

2.2 Promise

Promise 是解决回调地狱的一种有效方式，它表示一个异步操作的最终结果或失败原因。

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

2.3 async/await

async/await 是 ES2017 引入的语法糖，使异步代码看起来像同步代码，从而更易读和维护。

async function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

async function processData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

processData();

3. 错误处理

在异步编程中，错误处理是一个重要的部分。我们需要确保在异步操作中捕获并处理错误，以避免程序崩溃或数据不一致。

3.1 Promise 错误处理

使用 Promise 时，可以通过 .catch 方法捕获错误。

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Error occurred");
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

3.2 async/await 错误处理

使用 async/await 时，可以通过 try/catch 块捕获错误。

async function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Error occurred");
        }, 1000);
    });
}

async function processData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

processData();

3.3 全局错误处理

在某些情况下，可能需要捕获未处理的 Promise 错误。可以通过全局事件处理程序来实现。

process.on("unhandledRejection", (reason, promise) => {
    console.error("Unhandled Rejection at:", promise, "reason:", reason);
});

4. 实战示例

4.1 使用 Fetch API 获取数据

以下示例展示了如何使用 Fetch API 异步获取数据，并处理可能的错误。

async function fetchUserData(userId: string): Promise<any> {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!response.ok) {
        throw new Error("Network response was not ok " + response.statusText);
    }
    return await response.json();
}

async function displayUserData(userId: string) {
    try {
        const userData = await fetchUserData(userId);
        console.log(userData);
    } catch (error) {
        console.error("Failed to fetch user data:", error);
    }
}

displayUserData("1");

4.2 模拟异步任务

模拟多个异步任务，并在所有任务完成后处理结果。

function asyncTask(id: number): Promise<string> {
    return new Promise((resolve, reject) => {
        const duration = Math.floor(Math.random() * 2000) + 1000;
        setTimeout(() => {
            if (Math.random() > 0.7) {
                reject(`Task ${id} failed`);
            } else {
                resolve(`Task ${id} completed in ${duration}ms`);
            }
        }, duration);
    });
}

async function runTasks() {
    const tasks = [1, 2, 3, 4, 5].map((id) => asyncTask(id));
    try {
        const results = await Promise.all(tasks);
        console.log("All tasks completed:", results);
    } catch (error) {
        console.error("One of the tasks failed:", error);
    }
}

runTasks();

5. 结论

在本篇学习笔记中，我们探讨了 TypeScript 中的异步编程与错误处理，涵盖了回调、Promise、async/await 以及如何捕获和处理异步操作中的错误。通过掌握这些知识，你可以在实际项目中更好地处理异步操作和错误，编写出更可靠和可维护的代码。

下一篇学习笔记将介绍 TypeScript 与前端框架的结合应用，如 Angular 和 React，希望你能继续关注本系列的学习笔记，进一步提升 TypeScript 编程技能。