javascript - How do I print Fetch promise value in ReactJs? - Stack Overflow

admin管理员组

文章数量:1279014

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

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

• javascript
• reactjs
• promise
• fetch-api

Share Improve this question Follow asked Jan 8, 2018 at 21:18 sandersander 1,65455 gold badges2525 silver badges5656 bronze badges 2

• 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 Commented Jan 8, 2018 at 21:37
• 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 Commented Jan 10, 2018 at 14:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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

            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.

本文标签： javascriptHow do I print Fetch promise value in ReactJsStack Overflow