Typescript Promise的基础用法

TypeScript 中 Promise 的用法

在现代前端开发中，异步编程是不可避免的一部分。JavaScript 提供了多种处理异步操作的方法，其中 Promise 是一种非常强大且常用的工具。TypeScript 作为 JavaScript 的超集，不仅继承了 Promise 的所有功能，还通过类型系统增强了其可读性和安全性。本文将详细介绍在 TypeScript 中如何使用 Promise。

什么是 Promise？

Promise 是一个代表异步操作最终完成或失败的对象。它有三种状态：

1. Pending（等待）：初始状态，既不是成功，也不是失败状态。
2. Fulfilled（已完成）：意味着操作成功完成。
3. Rejected（已拒绝）：意味着操作失败。

Promise 提供了 .then() 和 .catch() 方法来处理成功和失败的情况，以及 .finally() 方法来处理无论成功还是失败都需要执行的逻辑。

基本用法

首先，让我们看一个简单的 Promise 示例：

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 模拟一个成功或失败的条件
            if (success) {
                resolve("数据获取成功！");
            } else {
                reject("数据获取失败！");
            }
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // "数据获取成功！"
    })
    .catch(error => {
        console.error(error); // "数据获取失败！"
    });

在这个例子中，fetchData 函数返回一个 Promise，它在一秒钟后模拟成功或失败。

TypeScript 中的类型安全

TypeScript 的强大之处在于类型系统。使用 Promise 时，可以明确指定其解析值（fulfilled value）和拒绝原因（rejection reason）的类型。

function fetchUserData(): Promise<{ name: string; age: number }> {
    return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
            const user = { name: "张三", age: 30 };
            resolve(user);
        }, 1000);
    });
}

fetchUserData()
    .then(user => {
        console.log(`姓名: ${user.name}, 年龄: ${user.age}`);
    })
    .catch(error => {
        console.error("获取用户数据失败:", error);
    });

在这个例子中，fetchUserData 函数返回一个解析值为 { name: string; age: number } 类型的 Promise。

链式调用和错误处理

Promise 支持链式调用，每个 .then() 都可以返回一个新的 Promise，从而可以串联多个异步操作。

function fetchUser(): Promise<string> {
    return Promise.resolve("张三");
}

function getUserAge(userName: string): Promise<number> {
    return new Promise(resolve => {
        // 模拟根据用户名获取年龄
        setTimeout(() => {
            resolve(userName === "张三" ? 30 : 25);
        }, 1000);
    });
}

fetchUser()
    .then(userName => {
        console.log(`用户名: ${userName}`);
        return getUserAge(userName);
    })
    .then(age => {
        console.log(`年龄: ${age}`);
    })
    .catch(error => {
        console.error("发生错误:", error);
    });

在上面的例子中，fetchUser 返回用户名，然后 getUserAge 根据用户名返回年龄。通过链式调用，我们可以依次执行这些异步操作。

使用 async/await

虽然 Promise 提供了强大的功能，但处理多个异步操作时，代码可能会变得复杂且难以阅读。async 和 await 语法是对 Promise 的一个语法糖，可以使异步代码看起来更像是同步代码。

async function getUserInfo(): Promise<void> {
    try {
        const userName: string = await fetchUser();
        console.log(`用户名: ${userName}`);

        const age: number = await getUserAge(userName);
        console.log(`年龄: ${age}`);
    } catch (error) {
        console.error("发生错误:", error);
    }
}

getUserInfo();

在这个例子中，async 函数 getUserInfo 使用 await 等待 Promise 的结果，并且使用 try...catch 块来处理错误。

总结

Promise 是处理异步操作的强大工具，TypeScript 通过类型系统增强了其可读性和安全性。通过理解 Promise 的基本用法、类型安全、链式调用、错误处理以及 async/await 语法，你可以更加高效地编写异步代码。希望这篇文章能帮助你更好地掌握 TypeScript 中的 Promise。