跳到主要内容

TypeScript Promise基础

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

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

什么是 Promise？​

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

  1. Pending（等待中）：初始状态，表示异步操作尚未完成。
  2. Fulfilled（已完成）：表示异步操作成功完成。
  3. Rejected（已拒绝）：表示异步操作失败。

一旦 Promise 的状态从 Pending 变为 Fulfilled 或 Rejected，它就不会再改变。

创建一个 Promise​

在 TypeScript 中，我们可以使用 Promise 构造函数来创建一个新的 Promise。构造函数接受一个函数作为参数，这个函数被称为 执行器（executor）。执行器函数有两个参数：resolve 和 reject，它们分别用于将 Promise 的状态设置为 Fulfilled 或 Rejected。

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

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

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

处理 Promise 的结果​

一旦 Promise 的状态变为 Fulfilled 或 Rejected，我们可以使用 .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 请求。如果提供的 userId 是 1，则返回用户数据；否则，返回一个错误。

总结​

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

备注

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

附加资源与练习​

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

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