使用ReactJS中的Fetch进行POST调用(带有标头和请求正文)

时间:2018-08-09 09:33:22

标签: reactjs api post header fetch

对于任何一种编码,我都是一个完整的新手。

我正在尝试使用第三方供应商公开的此API。这些是电话的详细信息。

API的URL为http://(HOST_IP):(HOST_PORT)/midsizeable/HJK/CheckerRun

 - Request Headers :
servicename:login  
frontofficeid:Checker 
id:Mobile
language:1 
Content-Type:application/json 
loginid:SYSADMIN1

Request Body: 
{  "data" : 
  {  "attributes": 
     {    "loginId": "SYSADMIN1", 
          "password": "abcd1234", 
           "pmuv": "RTY" 
}  
}
}

这就是我尝试过的:

 componentDidMount(){
    var myHeaders = new Headers();
    myHeaders.append('Accept' ,  'application/json');
    myHeaders.append('Content-Type' ,  'application/json');
    myHeaders.append('servicename' ,  'login');
    myHeaders.append('frontofficeid' ,  'Checker');
    myHeaders.append('id' ,  'Mobile');
    myHeaders.append('language' ,  1);
    myHeaders.append('loginid' ,  'SYSADMIN1');

    const myInit = {
      method : "POST",
      data : {
        attributes: {
          loginId: "SYSADMIN1",
          password: "abcd1234",
          pmuv: "RTY"
        }
      },
      headers: myHeaders
    };
    var url="http://<HOST_IP>:<HOST_PORT>/midsizeable/HJK/CheckerRun"

    var myRequest = new Request(url)
    fetch(myRequest, myInit)
      .then((response) => {
        console.log(response)
        return response.json();
      })
      .then((jsonObject) => {
      console.log("BODY ")
      console.log("This is Obj" , jsonObject)
        this.setState({
          message : jsonObject.id,
        })
      })
      .catch((error) => {
        console.log(error);
      });


  }

虽然它可以运行,但出现错误500(内部服务器错误)。伴随着我正在捕获“ SyntaxError:JSON在位置0处出现意外令牌j”

我知道这不是内部服务器错误,因为当我在linux服务器上使用curl运行此命令时,它正确运行了。

我已经搜索了很多,但是在任何地方都找不到错误。 请帮助构建API调用。

1 个答案:

答案 0 :(得分:0)

您需要将在请求正文中使用的对象转换为JSON字符串。

const myInit = {
  method: "POST",
  data: JSON.stringify({
    attributes: {
      loginId: "SYSADMIN1",
      password: "abcd1234",
      pmuv: "RTY"
    }
  }),
  headers: myHeaders
};