使用获取API发布反应

时间:2018-08-24 05:03:12

标签: javascript node.js reactjs fetch

我有一个消息方法,当我单击表单上的“提交”按钮时会触发该消息。但是我无法访问节点rest api中的URL,我试图通过“ req.body.url”访问URL,该URL返回未定义,当我看到req.body中不存在任何内容时。我已经使用axios做到了这一点,效果很好,可以帮助我使用

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

3 个答案:

答案 0 :(得分:3)

在获取过程中,您需要指定Json并同样将json字符串化:

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

答案 1 :(得分:1)

没有您的更多信息,我想这就是您想要的:

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", {
        method: "POST",
        body: JSON.stringify({url: "test"})
    })
    .then(function(response) {
      if(response.ok){
        return response.json();
    }{
        throw new Error("Post Failed")
    }
}).then(function(responseBody){
    console.log(responseBody)
})
.catch(function(error) {
    console.log("Request failed", error);
});

答案 2 :(得分:0)

const options = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ url: uri})
};

fetch("http://localhost:3000/messages", options)
  .then(response => response.json())
  .then(data =>console.log(data));
}