CODEWITHSUNDEEP
javascripthttpreact-native
Cameron Thompson
Cameron Thompson

Reputation: 92

React Native "fetch" returning server response without the information

I am using react native to create an application to act as a website that currently exists (with a user interface that works on a phone). i am using the "fetch" method to send a Http POST request to get information from a web server. The web server sends a response but it doesn't include the response message: enter image description here

I apologies that is an image but the debugger is not working for me. The code used to send the request:

HttpRequest = (RequestURL, callback) => {

    var AdminLoginBindingModel = {
      usr: this.state.username,
      pwd: this.state.password,
    }

    fetch(RequestURL,
    {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },     
      body: JSON.stringify(AdminLoginBindingModel)
    })
    .then((res) => {
      callback(res);
    })
    .catch((error) => {
      this.setState({Response: "Error: " + error});
    })                       
}

The callback function in the parameters is just a function to change the state variable to display the information on the screen

ValidateResponse(response){
    this.setState({Response: "Result: " + JSON.stringify(response), 
        displayMessage: "Success"});
    console.log(JSON.stringify(response));
}

The Request being sent is "https://mibase-test.mibase.com.au/members/api/startSession.php?usr=&pwd=" The server responds with a json object regardless of a correct login or not

Edit: Changing the response to

.then((res) => {
      callback(res.json());
})

Result: enter image description here

Upvotes: 2

Views: 4463

Answers (2)

set0gut1
set0gut1

Reputation: 1672

To get object from fetch response, you have to call res.json like following:

fetch(RequestURL, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },     
  body: JSON.stringify(AdminLoginBindingModel)
})
.then(res => res.json())    // HERE
.then(obj => callback(obj))

But it occurs an error because response body itself is invalid json format. It contains some HTML tags:

{"member": {"username":"","password":"","key":"***","status":"No"}}<br><br>Username: <br>Key: ***

Please check the inplementation of server.

EDIT: full code here

const fetch = require("node-fetch")

HttpRequest = (RequestURL, callback) => {
    const AdminLoginBindingModel = { usr: "foo", pwd: "bar" }
    fetch(RequestURL, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },     
      body: JSON.stringify(AdminLoginBindingModel)
    })
    .then(res => res.json())
    .then(obj => callback(obj))
    .catch(error => console.log(error))                       
}

const ValidateResponse = response => console.log(JSON.stringify(response))
URL = 'https://mibase-test.mibase.com.au/members/api/startSession.php?usr=&pwd='
HttpRequest(URL, ValidateResponse)

Upvotes: 2

Andrew Svietlichnyy
Andrew Svietlichnyy

Reputation: 751

response doesn't contain received data directly. It provides interface methods to retrieve it. For example use response.json() to parse response text as JSON. It will return promise that resolves to the parsed object. You won't need to call JSON.parse on it:

fetch(RequestURL,
{
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },     
  body: JSON.stringify(AdminLoginBindingModel)
})
.then((res) => {
  return res.json();
}).then((obj) => {
  console.log(obj);
});

Check https://developer.mozilla.org/en-US/docs/Web/API/Response and https://facebook.github.io/react-native/docs/network.html for more information.

Upvotes: 2

Related Questions