JavaScript 中如何访问 Promise 的值

使用 Promise.then() 方法访问承诺的值,例如 p.then(value => console.log(value))。 then() 方法接受一个函数,该函数将 promise 的解析值作为参数传递。

// ?️ Example promise
const p = Promise.resolve('hello');

p.then(value => {
  console.log(value); // ?️ "hello"
}).catch(err => {
  console.l

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

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

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

这是因为一个 promise 可以有 3 个状态:

  1. pending – 初始状态,既没有完成也没有被拒绝。
  2. fulfilled – 操作成功并且承诺得到解决。
  3. rejected – 操作失败。

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

// ?️ Example rejected promise
const p = Promise.reject('Something went wrong');

p.then(value => {
  console.log(value);
}).catch(err => {
  console.log(err); // ?️ "Something went wrong"
});

我们使用 Promise.reject 方法来获得被拒绝的承诺。

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

从传递给 then() 方法的函数返回的值被包装在一个承诺中,因此我们可以根据需要链接对该方法的多次调用。

const p = Promise.resolve(13);

p.then(value => {
  console.log(value); // ?️ 13

  return value + value;
}).then(value => {
  console.log(value); // ?️ 26

  return value + value;
});

或者,我们可以使用 async/await 语法访问承诺的值。

要访问承诺的值:

  1. 定义一个异步函数。
  2. 使用 await 运算符等待承诺。
  3. 将使用 await 运算符的结果分配给变量。
// ?️ Example promise
const p = Promise.resolve('Hello World');

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

example();

我们能够使用 await 运算符,因为我们将函数标记为异步。

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

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

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

// ?️ Example rejected promise
const p = Promise.reject('Something went wrong');

async function example() {
  try {
    const value = await p;
    console.log(value);
  } catch (err) {
    console.log(err); // ?️ "Something went wrong"
  }
}

example();

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

在许多用例中,我们可能希望在函数外部使用 await 运算符。

// ?️ Example promise
const p = Promise.resolve('Hello world');

try {
  const value = await p;
  console.log(value); // ?️ "Hello world"
} catch (err) {
  console.log(err);
}

如果我们的 Node 版本高于 16.12.0,则顶级 await 语法在 Node.js 中可用。

如果打算在浏览器中使用顶级 await,请查看 caniuse 表以了解浏览器对顶级 await 的支持。

在撰写本文时,通过将 JavaScript 文件作为模块加载到 html 文件中,可以为大多数现代浏览器启用顶级 await 运算符。

// ?️ Example rejected promise
const p = Promise.reject('Something went wrong');

try {
  const value = await p;
  console.log(value);
} catch (err) {
  // ?️ catch the error here
  console.log(err); // ?️ "Something went wrong"
}

如果未处理对 promise 的拒绝,例如 在 catch 块中,您的服务器可能处于不一致状态。

在使用 await 运算符时,最好使用 try/catch 块。