TypeScript 中访问 Promise 的值

要在 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 被履行或拒绝。

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

这是因为,如果 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() 方法。

这是因为一个 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 方法被调用并传递了拒绝的原因。

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() 方法返回。