Javascript 使用fetchapi在react中发布

我有一个message方法，当我单击表单上的submit按钮时会触发该方法。但是我无法访问节点RESTAPI中的url，我试图通过“req.body.url”访问url，它返回一个未定义的值，当我看到req.body中有什么内容时，什么都不存在。我已经使用axios完成了这项工作。它工作正常。请帮助我使用fetch

    message(event){
       event.preventDefault();
           const uri = this.state.short.url;
             fetch("http://localhost:3000/messages", {
              method: "post",
              body: {url: uri}
              })
            .then(function(data) {
          console.log("Request succeeded with  response", data);
           })
       .catch(function(error) {
           console.log("Request failed", error);
         });
    }

---

在获取过程中，您需要指定Json，并将Json串接如下：

body: JSON.stringify({ url: uri }),
 headers:{
   'Content-Type': 'application/json'
}

---

在获取过程中，您需要指定Json，并将Json串接如下：

body: JSON.stringify({ url: uri }),
 headers:{
   'Content-Type': 'application/json'
}

---

没有你提供的更多信息，我猜这就是你想要的：

fetch("http://localhost:3000/messages", {
    method: "post",
    body: JSON.stringify({url: uri})
    })
.then(function(response) {
    if(response.ok){
        return response.json();
    }{
        throw new Error("Post Failed")
    }
}).then(function(responseBody){
    console.log(responseBody.uri)
})
.catch(function(error) {
    console.log("Request failed", error);
});

这是一个非常相似的可运行版本。它使用的服务只是回显数据进行测试

fetch（“http://httpbin.org/post", {
方法：“张贴”，
正文：JSON.stringify（{url:“test”}）
})
.然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}{
抛出新错误（“Post失败”）
}
}).then（函数（响应体）{
console.log（responseBody）
})
.catch（函数（错误）{
日志（“请求失败”，错误）；
});如果没有您提供的更多信息，我猜这就是您想要的：

fetch("http://localhost:3000/messages", {
    method: "post",
    body: JSON.stringify({url: uri})
    })
.then(function(response) {
    if(response.ok){
        return response.json();
    }{
        throw new Error("Post Failed")
    }
}).then(function(responseBody){
    console.log(responseBody.uri)
})
.catch(function(error) {
    console.log("Request failed", error);
});

这是一个非常相似的可运行版本。它使用的服务只是回显数据进行测试


fetch（“http://httpbin.org/post", {
方法：“张贴”，
正文：JSON.stringify（{url:“test”}）
})
.然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}{
抛出新错误（“Post失败”）
}
}).then（函数（响应体）{
console.log（responseBody）
})
.catch（函数（错误）{
日志（“请求失败”，错误）；
});您可能需要添加更多的信息。例如，试图访问req.body.url的代码在哪里？我正在访问RESTAPI（在nodejs中）中的req.body.url。在分配给body之前，将js对象转换为JSON？像
body:json.stringify（{url}）
您可能需要添加更多的信息。例如，试图访问req.body.url的代码在哪里？我正在访问RESTAPI（在nodejs中）中的req.body.url。在分配给body之前，将js对象转换为JSON？比如
body:json.stringify（{url}）
@ArupRakshit我认为你是不对的。传递头和字符串化JSON仍然是必要的。发布时，客户端声明其主体的内容类型。为什么不需要stringify呢？Axios本身做一些事情，但OP使用fetch。@ChrisCousins Opps。。我仍然把它读作“axios”，从未使用过fetch，所以我不知道。。。需要一杯咖啡，还在醒着。哈，是的，不用担心，axios很棒@我认为你是不对的。传递头和字符串化JSON仍然是必要的。发布时，客户端声明其主体的内容类型。为什么不需要stringify呢？Axios本身做一些事情，但OP使用fetch。@ChrisCousins Opps。。我仍然把它读作“axios”，从未使用过fetch，所以我不知道。。。需要一杯咖啡，还在醒着。哈，是的，不用担心，axios很棒！谢谢你的回复，但它不起作用我收到请求失败类型错误：失败fetch@VedaVyas我更新了我的答案，将JSON.stringify添加到正文中，并添加了一个可运行的版本，您可以使用该版本进行比较。感谢您的回复，但它不起作用。我收到了请求失败类型错误：失败fetch@VedaVyas我更新了我的答案是在正文中包含JSON.stringify和可用于比较的可运行版本。