TypeScript 中 Promise 的使用技巧

Promise 是一种解决 JavaScript 中回调地狱问题的方案，它是一种用于异步操作的对象，用于表示某个未来承诺将会被兑现，或表示一个异步操作的结果。随着 TypeScript 的流行，越来越多的开发者开始使用 TypeScript，并且也将 Promise 作为他们异步操作的主要方式。但是，Promise 的行为很容易被误用，不当的使用可能会导致性能问题或者导致代码的可读性变差。在本文中，我们将介绍 TypeScript 中 Promise 的正确使用技巧，并提供一些示例代码来帮助您更好地理解这个话题。

创建 Promise

要创建一个 Promise 对象，需要使用 Promise 构造函数。Promise 构造函数需要传入一个函数作为参数，这个函数也称为执行器。执行器函数将接收两个参数，resolve 和 reject，这两个参数都是函数类型，分别用于将 Promise 的状态从 “pending”（未完成）变为 “fulfilled”（已完成）和 “rejected”（已拒绝）。示例如下：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  // 异步操作
  const result = // 异步操作结果
  if (result) {
    resolve(result);
  } else {
    reject(new Error("异步操作失败"));
  }
});

在上面的代码中，我们创建了一个 Promise 对象，并且在执行器函数中执行了一个异步操作。如果异步操作执行成功，就调用 resolve 函数将 Promise 状态变为 “fulfilled”；如果异步操作执行失败，就调用 reject 函数将 Promise 状态变为 “rejected”。

Promise 链式调用

Promise 的优势之一是它可以让异步操作变得更加简单明了。Promise 可以将异步调用的多个步骤组织在一起，让整个过程更具可读性。例如，我们可以使用 Promise 来获取一个人的年龄，然后使用这个年龄来获取该人的出生日期。我们可以使用 Promise 的链式调用来解决这个问题，如下所示：

// www.javascriptcn.com code example
function getAge(): Promise<number> {
  return new Promise((resolve, reject) => {
    // 异步操作
    const age = 18;
    resolve(age);
  });
}

function getBirthday(age: number): Promise<string> {
  return new Promise((resolve, reject) => {
    // 异步操作
    const birthday = "1990-01-01";
    resolve(birthday);
  });
}

getAge()
  .then((age) => getBirthday(age))
  .then((birthday) => console.log(birthday))
  .catch((err) => console.error(err));

在上面的代码中，我们定义了两个 Promise 函数：getAge 和 getBirthday。我们通过使用 Promise 的 then 方法来组合这两个函数，获取一个人的出生日期，并且在输出结果的同时，处理异步操作中可能出现的错误。在实际开发中，我们也应该尽量多地使用 Promise 链式调用来简化异步操作和提高代码可读性。

Promise.all 和 Promise.race

在实际开发中，我们通常会需要同时进行多个异步操作，然后等待他们全部完成，并根据完成的结果来进行其他处理。Promise.all 和 Promise.race 是两种非常常用的方法，它们可以方便地实现上述需求。

Promise.all 接收一个由 Promise 对象组成的数组作为参数，返回一个新的 Promise 对象。Promise.all 并行执行所有传入的 Promise 对象，如果其中任何一个 Promise 被拒绝（rejected），则返回的 Promise 对象会被拒绝，并将被拒绝的结果作为返回结果；如果所有的 Promise 都被兑现（fulfilled），则返回的 Promise 对象会被兑现，并将所有 Promise 的结果按原始数组的顺序按数组的顺序传入到 then 函数的回调函数中。

例如，我们可以使用 Promise.all 同时获取多个人的年龄和出生日期，如下所示：

Promise.all([getAge(), getBirthday()])
  .then(([age, birthday]) => console.log("年龄：", age, "，出生日期：", birthday))
  .catch((err) => console.error(err));

Promise.race 方法与 Promise.all 方法非常相似，接收一个由 Promise 对象组成的数组作为参数，返回一个新的 Promise 对象。与 Promise.all 不同的是，Promise.race 只要其中一个 Promise 被解决，无论是兑现还是被拒绝，返回的 Promise 对象都会立即被解决。例如，我们可以使用 Promise.race 获取多个请求的结果，如下所示：

const urls = ["http://example.com", "http://ajax.googleapis.com"];

Promise.race(urls.map((url) => fetch(url)))
  .then((resp) => console.log(resp))
  .catch((err) => console.error(err));

在上面的代码中，我们使用 fetch 方法发送了多个请求，Promise.race 会在其中任何一个请求有响应后就立即返回响应结果。

总结

在本文中，我们介绍了 TypeScript 中 Promise 的使用技巧，并提供了一些示例代码来帮助您更好地理解这个话题。正确使用 Promise 可以使异步操作更加高效、可靠和可读，它也是现代 Web 应用程序的必备技能之一。我们强烈建议您在实际开发中多多练习 Promise 的使用，以便更好地掌握它的用法。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64559c50968c7c53b090fced