如何在 ReactJs 中打印 Fetch 承诺值？答案

【问题标题】：How do I print Fetch promise value in ReactJs?如何在 ReactJs 中打印 Fetch 承诺值？
【发布时间】：2018-06-17 21:32:57
【问题描述】：

我正在尝试打印 Fetch 承诺的值，但是当我 console.log 时它显示 undefined。

当我在 Postman 中尝试时，Php 服务器会在 http 正文中使用 jwt 令牌响应此获取。

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

【问题讨论】：

你的第一个 .then 没有返回语句，所以返回 undefined ...这就是为什么第二个 .then 的结果是未定义的。尝试在您的第一个 .then 中返回 responseObject.text() 或 responseObject.json()
通过将return responseObject 添加到第一个来解决问题。 then 子句和 `console.log(responseObject.text());到第二个 .then 子句，现在我的 jwt 令牌打印出来了。谢谢@Jaro

标签： javascript reactjs promise fetch-api

【解决方案1】：

您必须使用格式化程序来记录或处理数据，以下是一种方法

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

【讨论】：

在response 的生命周期中设置response.text().then 真的有效！

【解决方案2】：

您必须从responseObject 中调用json() 或text() 之类的东西，然后返回该结果以将其输入result。

【讨论】：

【解决方案3】：

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

现在通过将 return responseObject 添加到第一个 .then 子句和 console.log(responseObject.text()); 到第二个 .then 子句来解决问题我的 jwt 令牌打印出来了。

【讨论】：

第一个then 子句接收承诺并返回.json() 或.text()。第二个使用 json 响应。仅使用一个 then 子句将返回“Promise”，这是我们不希望使用的。