React中response的用法

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对象，内容是该对象中的字段之一。

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

编辑：我的问题不是关于“为什么响应给出了一个promise，而不是一个正常的对象”。它更多的是关于回应回报promise的含义。

Answer 1

这是因为响应。json（）返回promise。当它返回promise时，使用另一个然后来捕获它的响应。更多关于promise的信息可以在这里找到。

在使用javascriptfetch时，需要使用response将响应转换为json。json（）。您可以使用axios跳过将响应转换为json的额外步骤，例如。

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

Answer 2

下面的代码段不起作用，因为response。json（）返回一个promise，而不是一个简单的对象，这就是为什么在第二个代码段中，它返回一个正确的值，就像您使用的一样。然后获取值

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)); 
})

但是，通过返回响应，可以简化为可链接的promise。json（）promise从第一个开始。然后如第二个代码片段所示