Question

有人可以在React中突出显示这两个代码段之间的区别吗？

window.fetch(url)
  .then((response) => {
    console.log(response.json().content);
})

和

window.fetch(url)
  .then((response) =>  response.json())
  .then((data) =>{
    console.log(data.content);
})

响应包含一个Java对象，内容是其中的字段之一该对象。

第二个代码段打印正确的内容值，而第一个代码段打印未定义的内容。

编辑：我的问题不是关于“为什么响应会给出一个承诺而不是一个普通的对象”。更多的是响应返回诺言的含义。

Answer 1

下面的代码段无效，因为response.json()返回了Promise而不是简单的对象，这就是为什么在第二个代码段中，您using .then返回正确的值的原因 >

window.fetch(url)
  .then((response) => {
    console.log(response.json().content); // response.json() is not an object but a promise and hence you can't access content from it directly
})

第二个片段等于

window.fetch(url)
  .then((response) => {
    response.json().then((content) => console.log(content)); 
})

但可以简化为可链接的诺言，如第二个片段所示，从第一个response.json() promise返回.then

Answer 2

这是因为response.json()返回了promise。由于它返回了promise，所以另一个then用于捕获其响应。有关承诺的更多信息，请参见here。

使用JavaScript fetch时，您需要使用response.json()将响应转换为json。您可以使用axios例如跳过跳过将响应转换为json的额外步骤

axios.get(url)
  .then(res => {console.log(res)})

在React中使用响应

2 个答案: