How do I print Fetch promise value in ReactJs?

Question

I'm trying to print out the value of Fetch promise, but it shows undefined when i console.log it.

Php server responds to this fetch with a jwt token in the body of http when I try it in Postman.

 fetch("http://localhost:8001/api/login", {
                        method: 'post',
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                       },
                        body: 'username=' + this.state.username + '&password=' + this.state.password
                    })
                        .then(function (responseObject) {
                            console.log('Request succeeded with Response object', responseObject);

                        })
                        .then(function (result){
                            console.log(result);
                        })
                        .catch(function (error) {
                            console.log('Request failed', error);
                        });
                }else{
                    console.log('You must enter username, password.');
                }

your first .then has no return statement, so returns undefined ... which is why result in the second .then is undefined. try return responseObject.text() or responseObject.json() in your first .then — Jaromanda X
Solved the problem by addding return responseObject to the first. then clause and `console.log(responseObject.text()); to the second .then clause, now my jwt token prints out. Thank you @Jaro — sander

badri badri · Accepted Answer · 2018-01-08T23:19:36

You have to use a formatter to log or do something with the data, following is a way of doing it

fetch('http://localhost:8001/api/login').then(
function(response) {
  if (response.status !== 200) {
    console.log('Problem in fetching');
    return;
  }
  response.text().then(function(data) {
    console.log(data);
  });
})

How do I print Fetch promise value in ReactJs?

3 Answers