javascript - 在返回 response.json() promise 之前在 then() 方法中记录 response.json()

Question

我正在学习网络开发，所以可能已经有人问过这个问题，但我还没有找到。我试着记录 response.json()在.then里面返回 response.json() 之前的方法答应第二.then处理函数。我面临的问题是，尽管 response.json()正在记录结果，下一个.then中的代码方法未被执行。这是我的代码:

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise)
    
fetchPromise
.then( response => {
  console.log(response.json())
  return response.json();
})
.then( json => {
  console.log(json[0].name);
});

代码应该记录 response.json()的结果，然后以日志记录结束 "baked beans"在第二个 .then处理程序，但它只是记录 promise 对象，之后什么也没有发生。然而，这段代码似乎有效:

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
console.log(fetchPromise)
    
fetchPromise
.then( response => {
  var resp=response.json() // save the value first
  console.log(resp)
  return resp
})
.then( json => {
  console.log(json[0].name);
});

那么为什么将结果存储在变量中有效，而直接调用它却无效？

Answer 1

在控制台中，您会看到此错误:

Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read

那是因为你cannot execute response.json() twice .只需将 console.log 向下移动到最后一个 .then 并记录 json 而不是 res.json:

fetchPromise
.then( response => {
  console.log(response.json()) // remove this line
  return response.json()
})
.then( json => {
  console.log(json); // add this line
  console.log(json[0].name);
});