CODEWITHSUNDEEP
reactjsfetch
TaylorR
TaylorR

Reputation: 4013

React fetching a remote API, the response is not what I expected

In my LatestBookSlide.js, I wrote the following code:

class LatestBookSlide extends Component {

  componentDidMount() {
    fetch('http://api/book/hello')
      .then(function (response){
        console.log(response);
      });
  }

}

The fetching is now OK thanks to CORS added (discussed in this thread: Silex "->after" middleware usage).

The console log shows the response like this:

07:01:34.672 Response { type: "cors", url: "http://api/book/hello", 
redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, 
bodyUsed: false } 1 bundle.js:36481:10

But this is not what I expected. A direct call to that API in browser will return below:

{"status":200,"out":{"res":"Welcome to RSYWX API interface."}}

Are there some further steps I am missing here?

Upvotes: 0

Views: 2830

Answers (2)

timetowonder
timetowonder

Reputation: 5421

React has nothing to do with it;

fetch call returns a promise with a Response object. That's what you're seeing.

Response object has information about the status of the response as well as some convenience methods like .json(), .text(), .formData(), etc.

If you're expecting the server's response to be json, you should do this:

fetch('http://api/book/hello')
  .then(function (response) {
    return response.json()
  })
  .then(function (response) {
    console.log(response); // now this is the body of the response
  })

You might also want to check whether the response was not an error by checking the status field of the Response object.

Read more about fetch here and here

Upvotes: 4

nbkhope
nbkhope

Reputation: 7474

What implementation of fetch() are you using? Try calling the json() method on the response:

  response.json().then(function(data) {  
    console.log(data);  
  });

Upvotes: 1

Related Questions