跳到主要内容

TypeScript Promise基础

在现代 JavaScript 和 TypeScript 开发中,异步编程是一个非常重要的概念。Promise 是处理异步操作的核心工具之一。它允许我们以更清晰、更结构化的方式处理异步任务,避免了传统回调函数的“回调地狱”问题。

本文将带你从零开始学习 TypeScript 中的 Promise,并通过代码示例和实际案例帮助你掌握这一重要概念。

什么是 Promise?

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

  1. Pending(等待中):初始状态,表示异步操作尚未完成。
  2. Fulfilled(已完成):表示异步操作成功完成。
  3. Rejected(已拒绝):表示异步操作失败。

一旦 Promise 的状态从 Pending 变为 FulfilledRejected,它就不会再改变。

创建一个 Promise

在 TypeScript 中,我们可以使用 Promise 构造函数来创建一个新的 Promise。构造函数接受一个函数作为参数,这个函数被称为 执行器(executor)。执行器函数有两个参数:resolvereject,它们分别用于将 Promise 的状态设置为 FulfilledRejected

typescript
const myPromise = new Promise<string>((resolve, reject) => {
const success = true; // 模拟操作是否成功

if (success) {
resolve("操作成功!");
} else {
reject("操作失败!");
}
});

在上面的代码中,我们创建了一个 Promise,并根据 success 变量的值来决定是调用 resolve 还是 reject

处理 Promise 的结果

一旦 Promise 的状态变为 FulfilledRejected,我们可以使用 .then().catch() 方法来处理结果。

  • .then():用于处理 Fulfilled 状态的结果。
  • .catch():用于处理 Rejected 状态的结果。
typescript
myPromise
.then((result) => {
console.log(result); // 输出: "操作成功!"
})
.catch((error) => {
console.error(error); // 输出: "操作失败!"
});
提示

你也可以使用 .finally() 方法,无论 Promise 是成功还是失败,都会执行其中的代码。

链式调用

Promise 的一个强大特性是链式调用。你可以在一个 .then() 中返回一个新的 Promise,并在下一个 .then() 中继续处理。

typescript
const fetchData = (): Promise<string> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("数据已加载");
}, 1000);
});
};

fetchData()
.then((data) => {
console.log(data); // 输出: "数据已加载"
return "处理后的数据";
})
.then((processedData) => {
console.log(processedData); // 输出: "处理后的数据"
})
.catch((error) => {
console.error(error);
});

在上面的例子中,fetchData 函数返回一个 Promise,模拟了一个异步操作。我们通过链式调用 .then() 来处理数据。

实际案例:模拟 API 请求

让我们通过一个更实际的例子来展示 Promise 的应用。假设我们需要从服务器获取用户数据,并在获取成功后显示用户信息。

typescript
interface User {
id: number;
name: string;
}

const fetchUser = (userId: number): Promise<User> => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId === 1) {
resolve({ id: 1, name: "John Doe" });
} else {
reject("用户未找到");
}
}, 1000);
});
};

fetchUser(1)
.then((user) => {
console.log(`用户名称: ${user.name}`); // 输出: "用户名称: John Doe"
})
.catch((error) => {
console.error(error); // 输出: "用户未找到"
});

在这个例子中,fetchUser 函数模拟了一个异步的 API 请求。如果提供的 userId1,则返回用户数据;否则,返回一个错误。

总结

Promise 是 TypeScript 中处理异步操作的核心工具。通过 Promise,我们可以更清晰地组织和处理异步代码,避免回调地狱问题。本文介绍了 Promise 的基本概念、创建方法、结果处理以及链式调用,并通过实际案例展示了 Promise 的应用场景。

备注

如果你想进一步学习 Promise 的高级用法,可以探索 async/await 语法,它是基于 Promise 的语法糖,能够使异步代码更加简洁易读。

附加资源与练习

  • 练习 1:尝试修改 fetchUser 函数,使其支持多个用户 ID,并返回相应的用户数据。
  • 练习 2:使用 Promise.all 来同时处理多个 Promise,并观察其行为。

希望本文能帮助你掌握 TypeScript 中的 Promise 基础,并为你的异步编程之旅打下坚实的基础!