Javascript 为什么在发送fetch（）时我的响应数据未定义？

我正在尝试在客户端使用fetch（）将数据发布到nodeJS服务器或从nodeJS服务器发布数据

服务器接收到post请求，我可以记录req变量，但是当我res.send（“任何数据”）时，客户端无法检测到数据。奇怪的是，chrome可以看到响应，但我根本不知道如何引用数据

客户端代码

fetch（“/”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
用户：{
姓名：'约翰'，
电邮:'J@B.com',
}
})
.then（res=>console.log（res））
.then（数据=>console.log（数据））
.catch（（错误）=>console.error（'error:'，error））

服务器代码

app.post（“/”，（请求、回复）=>{
控制台日志（请求主体用户）
res.send（'你好？'）
})

参见使用

---

请参阅使用

然后
方法进行回调。该回调返回一个值

如果该值是一个承诺值，则将采用该承诺值，当解析该承诺值时，下一个
函数将接收该承诺值的解析值

如果该值不是承诺值，则下一个
函数将接收该值

这是您的功能：

res=>console.log（res）

它返回
console.log（res）
的返回值

console.log
始终返回
未定义

那么接下来的函数是：

…获取传递到
数据中的
未定义


您需要返回您真正关心的值

如果该值是响应正文中的数据，则需要：

把数据从身体里拿出来
从函数返回它
例如：

.then(res => {
    console.log(res);
    return res.json();
})
.then(data => console.log(data))

这假设您从主体中获取JSON。对于其他类型的数据，还有其他方法。
然后
方法接受回调。该回调返回一个值

如果该值是一个承诺值，则将采用该承诺值，当解析该承诺值时，下一个
函数将接收该承诺值的解析值

如果该值不是承诺值，则下一个
函数将接收该值

这是您的功能：

res=>console.log（res）

它返回
console.log（res）
的返回值

console.log
始终返回
未定义

那么接下来的函数是：

…获取传递到
数据中的
未定义


您需要返回您真正关心的值

如果该值是响应正文中的数据，则需要：

把数据从身体里拿出来
从函数返回它
例如：

.then(res => {
    console.log(res);
    return res.json();
})
.then(data => console.log(data))

这假设您从正文中获取JSON。对于其他类型的数据，还有其他方法。
变量的类型是
res
变量，因此您需要像下面这样以文本形式检索正文：

fetch('/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    user: {
      name: 'John',
      email: 'J@B.com',
    }
  })
})
.then(res => res.text())
.then(res => console.log(res))
.catch((error) => console.error('Error:', error))

res
变量的类型为，因此您需要以文本形式检索正文，如下所示：

fetch('/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    user: {
      name: 'John',
      email: 'J@B.com',
    }
  })
})
.then(res => res.text())
.then(res => console.log(res))
.catch((error) => console.error('Error:', error))

因为这不是您使用的方式，您的第一个实现处理程序将返回调用
console.log
的结果，该结果始终是
未定义的

在第一个实现处理程序中，您需要读取响应的主体（如果
res.ok
为true）。例如，要将其作为文本读取，您需要对响应调用
text
方法：

fetch("/",{
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
    user:{
        name: "John",
        email: "J@B.com",
    }
})
.then(res => {
    if (!res.ok) {
        throw new Error(`HTTP error ${res.status}`);
    }
    return res.text();
})
.then(text => console.log(text))
.catch((error) => console.error("Error:",error));

除了
text
：
json
，
arrayBuffer
，
blob
，
formData
，还有其他方法。您使用的方法取决于您发送回的内容和您想对其执行的操作

请注意
res.ok
上的检查。这在
fetch
API中有点像一把猎枪，它只拒绝它对网络错误的承诺，而不是HTTP错误。因此，您必须自己检查这些错误。（我将在中详细介绍。）因为这不是您使用的方式，而您的第一个履行处理程序将返回调用
控制台.log的结果，该结果总是
未定义的

在第一个实现处理程序中，您需要读取响应的主体（如果
res.ok
为true）。例如，要将其作为文本读取，您需要对响应调用
text
方法：

fetch("/",{
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
    user:{
        name: "John",
        email: "J@B.com",
    }
})
.then(res => {
    if (!res.ok) {
        throw new Error(`HTTP error ${res.status}`);
    }
    return res.text();
})
.then(text => console.log(text))
.catch((error) => console.error("Error:",error));

除了
text
：
json
，
arrayBuffer
，
blob
，
formData
，还有其他方法。您使用的方法取决于您发送回的内容和您想对其执行的操作

注意
res.ok
上的检查。这在
fetch
API中有点像一把猎枪，它只拒绝它对网络错误的承诺，而不是HTTP错误。因此你必须自己检查这些错误。（我在更多中描述。）
OP的响应不是JSON。OP的响应不是JSON。它实际上是text然后使用
response.text（）
非常感谢，这解释了我的很多问题！我现在已经把问题整理好了，我想我需要对承诺做更多的研究（我最近才开始使用Javascript）谢谢。实际上是text然后使用
response.text（）
非常感谢，这解释了我的很多问题！我现在已经把问题整理好了，我想我需要对承诺做更多的研究（我最近才开始使用Javascript）谢谢。