为什么 Fetch 的 .json() 方法有时返回 Promise，有时返回值？

探索 Fetch 的 .json() 方法中的 Promise 行为

在探索 Fetch API 时，.json() 方法出现了一个有趣的怪癖。让我们深入研究一下为什么它在某些情况下返回一个 Promise，而在其他情况下返回一个直接值。

考虑以下代码片段：

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));

这里，post.data 生成一个 Promise 对象，这表明第一个 .then() 处理程序中的 .json() 调用返回一个承诺。

但是，如果我们修改代码以简单地链接.json():

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));

post 现在成为一个对象，允许直接访问 title 属性。

要解开这个谜团，我们必须了解 Promise 的本质。 .json() 启动一个异步操作，以 JSON 形式获取 HTTP 响应正文，并返回一个承诺。这个 Promise 代表 JSON 解析数据的最终可用性。

当 Promise 从 .then() 处理程序返回时（如第一个示例），Promise 继续存在于链中。但是，当返回一个值时（如第二个示例中所示），promise 被视为“已履行”，并且返回的值将被采用作为外部 .then() 的结果。

为了处理这种情况，您可以使用嵌套的 .then()s:

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

链接承诺，或者使用现代异步关键字，例如 async 和wait:

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

请记住在尝试解析 JSON 之前始终检查 HTTP 响应状态，因为它可能并不总是采用预期的格式。

以上是为什么 Fetch 的 .json() 方法有时返回 Promise，有时返回值？的详细内容。更多信息请关注PHP中文网其他相关文章！