迹忆客 专注技术分享

要在 TypeScript 中访问 Promise 的值：

1. 定义一个异步函数。
2. 使用 await 运算符来等待承诺。
3. 将使用 await 运算符的结果分配给变量。

// 👇️ const p: Promise<string>
const p = Promise.resolve('Example value');

async function example() {
  try {
    const value = await p;
    console.log(value); // 👉️ "Example value"
  } catch (err) {
    console.log(err);
  }
}

example();

通过将函数标记为异步，我们可以在其中使用 await 运算符。

await 运算符用于等待 Promise 被履行或拒绝。

一种简单的思考方式是 - 当使用 await 运算符时，我们在特定函数中的代码会停在使用 await 的行上，直到 promise 被履行或拒绝。

与使用 then() 方法相比，这使我们的代码更易于阅读。

请注意 ，我们将操作包装在 try/catch 块中。

这是因为，如果 promise 被拒绝，我们希望能够在我们的 catch 块中访问原因。

// 👇️ const p: Promise<never>
const p = Promise.reject('An error occurred');

async function example() {
  try {
    const value = await p;
    console.log(value);
  } catch (err) {
    console.log(err); // 👉️ "An error occurred"
  }
}

example();

我们使用 Promise.reject() 方法来获得一个被拒绝的承诺。 当我们试图等待承诺时，我们的 catch 函数被调用并传递了拒绝的原因。

或者，我们可以使用 .then() 方法。

要在 TypeScript 中访问 Promise 的值，请在 Promise 上调用 then() 方法，例如 p.then(value => console.log(value))。 then() 方法接受一个函数，该函数将解析后的值作为参数传递。

const p = Promise.resolve('Hello world');

p.then((value) => {
  console.log(value); // 👉️ "Hello world"
}).catch((err) => {
  console.log(err);
});

我们使用 Promise.resolve() 方法来获取一个示例 Promise。

为了解决 promise，我们调用了 promise 对象的 then() 方法。

我们传递给 then() 方法的函数被调用，解析值作为参数。 我们可以在函数体中访问这个值。

请注意 ，我们还使用了 catch() 方法。

这是因为一个 Promise 可以有 3 个状态：

1. pending - 初始状态，既不满足也不拒绝。
2. fulfilled - 操作成功并且承诺已解决。
3. rejected - 操作失败。

如果 promise 得到满足并且操作成功，我们传递给 then() 方法的函数将被调用。

如果 promise 被拒绝，我们可以在 catch() 方法中访问拒绝的原因（错误）。

const p = Promise.reject('An error occurred');

p.then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err); // 👉️ "An error occurred"
});

在这个例子中，我们使用了 Promise.reject 方法来获得一个被拒绝的 Promise。

这一次，我们的 catch 方法被调用并传递了拒绝的原因。

请注意 ，我们从传递给 then() 方法的函数返回的值被包装在一个 Promise 中，因此我们可以根据需要链接尽可能多的对该方法的调用。

const p = Promise.resolve('Hello world');

p.then((value) => {
  console.log(value); // 👉️ "Hello world"

  return value;
}).then((value) => {
  console.log(value); // 👉️ "Hello world"
});

如果你不从回调函数返回值，你会隐式返回 undefined，它被包装在一个 Promise 中并由 then() 方法返回。