CODEWITHSUNDEEP
javascriptreactjspromisefetch-api
sander
sander

Reputation: 1654

How do I print Fetch promise value in ReactJs?

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.');
                }

Upvotes: 2

Views: 10100

Answers (3)

sander
sander

Reputation: 1654

            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);
                    return responseObject;
                })
                .then(function (result){
                    console.log(result.text());
                })
                .catch(function (error) {
                    console.log('Request failed', error);
                });
        }else{
            console.log('You must enter username, password.');
        }

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.

Upvotes: 0

badri
badri

Reputation: 448

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);
  });
})

Upvotes: 8

Daniel A. White
Daniel A. White

Reputation: 190945

You will have to call something like json() or text() off of responseObject and return that result to get it into result.

Upvotes: 1

Related Questions