JavaScript访问Promise返回值方法：then与async/await详解

在JavaScript语言体系中，Promise是一个核心概念。

它代表一个异步操作最终完成（或失败）及其结果值的状态对象。

Promise对象主要包含三种状态：

pending（进行中）
fulfilled（已成功）
rejected（已失败）

目前最广泛使用的异步操作实例是Fetch API，其fetch()方法直接返回一个Promise对象。

假设我们需要从后端API获取数据，本文将以JSONPlaceholder——一个伪造的REST API为例，具体获取id为1的用户信息。

fetch("https://jsonplaceholder.typicode.com/users/1")

接下来我们将探讨如何正确访问该异步操作返回的数据。

方法一：使用then()进行链式操作

这是最基础且直观的处理方式。

fetch("https://jsonplaceholder.typicode.com/users/1") // 1
  .then((response)=>response.json())  //2
  .then((user) => {
    console.log(user.address); // 3
  });

具体步骤包括：（1）调用API获取原始数据；（2）将响应转换为JSON对象；（3）将用户地址信息打印至控制台。

执行上述代码后，控制台输出结果如下：

{ street: 'Kulas Light', suite: 'Apt. 556', city: 'Gwenborough', zipcode: '92998-3874', geo: { lat: '-37.3159', lng: '81.1496' } }

方法二：在后续代码中直接使用返回值

如果我们需要在异步操作完成后，将返回值赋值给变量供后续逻辑使用，该如何处理？

若尝试采用以下错误的同步方式：

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response)=>response.json())
  .then((user) => {
    return user.address;
  });
console.log(address);

程序将输出非预期的结果。

Promise { <pending> }

出现该现象的原因是JavaScript代码默认同步执行。console.log()函数在fetch()请求发起后立即执行，此时并未等待异步请求解析完成。当console.log()运行时，fetch()返回的Promise对象仍处于pending状态，因此无法直接获取最终值。

为解决此问题，我们可以通过另一个.then()回调函数来访问Promise的返回值：

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};
printAddress();

或者采用async/await语法糖：

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = async () => {
  const a = await address;
  console.log(a);
};
printAddress();

采用上述两种正确方式，均可获得预期的用户地址数据：

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

总结

Promise对象在JavaScript异步编程中应用广泛，但开发者常对其返回值的使用存在困惑。本文通过具体案例，展示了如何在后续代码中正确获取Promise对象返回值的两种主要方式。

英文原文链接：https://dev.to/ramonak/javascript-how-to-access-the-return-value-of-a-promise-object-1bck

JavaScript中如何正确获取Promise异步操作的返回值

在JavaScript语言体系中，Promise是一个核心概念。

方法一：使用then()进行链式操作

方法二：在后续代码中直接使用返回值

总结

更多中文参考资料

实用工具推荐