Question

我正在尝试通过使用api调用创建一个简单的登录页面来学习反应本机应用程序。我将把用户名和密码发送到api，它会给我回复。但我不能这样做。好吧，我在这里分享我的代码......

var myRequest = new Request('<my API >', {method: 'POST', body: '{"username":this.state.uName , "password":this.state.pwd}'});
    fetch(myRequest).then(function(response) {
        alert('Res'+response);
    }).then(function(response) {
        alert('Blank'+response);
    })
    .catch(function(error) {
        alert('Error'+error);
    });

我认为将用户名和密码传递给服务器的方式是错误的。请给我一些想法然后我可以理解这里有什么问题。

Answer 1

var data = {
   "username": this.state.username,
   "password": this.state.password
}

fetch("https://....", {
   method: "POST",
   headers: headers,
   body:  JSON.stringify(data)
})
.then(function(response){ 
 return response.json();   
})
.then(function(data){ 
console.log(data)
});

我希望这会有所帮助。

Answer 2

你需要使用Json参数将json数据字符串化为发送请求，因为你正在尝试... 以下是在请求响应之前如何编码数据的示例代码

fetch('https://mywebsite.com/endpoint/', {  
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

Answer 3

As the commentators before me stated, you simply need to stringify your JSON Body. In general, I' suggest that you incorporate e.g. api sauce添加到您的堆栈中是否正确。它是axios库的综合包装器，提供标准化错误和ok密钥以便快速检查。

Answer 4

以下是登录的示例代码：

fetch(<hostURL>, {
        method: 'POST',
        headers: { 'Accept': 'application/json','Content-Type': 'application/json',},
        body: JSON.stringify({ userName: <userName> ,Password: <Password>,})
    }).then((response) => response.json())
    .then((responseData) => {
        console.log(responseData);
    }).catch((error) => {
        console.log("Error");
    });

如何使用react本机应用程序将数据发送到服务器并获取响应？

4 个答案: