fetch response.json() 给出 responseData = undefined答案

【问题标题】：fetch response.json() gives responseData = undefinedfetch response.json() 给出 responseData = undefined
【发布时间】：2015-10-20 12:52:22
【问题描述】：

使用 fetch 时：

  fetch(REQUEST_URL, {
      method: 'get',
      dataType: 'json',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then((response) => 
      {
        response.json() // << This is the problem
      })
    .then((responseData) => { // responseData = undefined

        console.log(responseData);
     });
     }).catch(function(err) {
        console.log(err);
      })
     .done();

以下作品有效，你知道为什么吗？ :

    JSON.parse(response._bodyText)

【问题讨论】：

使用花括号时需要返回response.json()

标签： react-native

【解决方案1】：

链接响应应该看起来更像这样，特别是response.json 部分。然后你应该在console.log 中得到一个Object。

.then(response => response.json())
.then(response => {

    console.log(response)

}

【讨论】：

我添加了.then(response => response.json())，它成功了。你能告诉我为什么在它没有用的时候添加它吗？
如果您使用花括号进行回调，则需要return response.json()。简化形式 response => response.json() 中包含一个隐式返回语句。
数小时以来一直在墙上敲打我的头。谢谢！

【解决方案2】：

Fetch 有点难以理解。我是新手，所以如果这里有火焰，请不要击落我，但响应数据是另一个承诺，您需要返回响应数据，然后使用另一个 then 语句处理该承诺，您最终可以在其中记录响应，而且您也缺少一些回报承诺中的陈述：

var makeRequest = function(){

    fetch('https://jsonplaceholder.typicode.com/posts/1', {
        method: 'get',
        dataType: 'jsonp',
        headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
        }
    })
    .then((response) => {
       return response.json() // << This is the problem
    })
    .then((responseData) => { // responseData = undefined
        addTestToPage(responseData.title);
        return responseData;
    })
  .catch(function(err) {
      console.log(err);
  })
}

function addTestToPage(textToAdd){
   var para = document.createElement("p");
   var node = document.createTextNode(textToAdd);
   para.appendChild(node);

  var element = document.getElementsByTagName("body")[0];
  element.appendChild(para);
}

makeRequest();

希望对您有所帮助：https://jsfiddle.net/byz17L4L/

【讨论】：

就我而言，第二个.then(responseData) 就足够了。谢谢！
好点 JohnnyQ 我已经更新了它并包含了它的小提琴，它只适用于 2 then's

【解决方案3】：

在我的案例中，它最终是如何解决的：

fetch('http://localhost:3001/questions', {
        method: 'GET',
        headers: {
        "Accept": "application/json",
        'Content-Type': 'application/json'
        }
    })
    .then(response => { return response.json();})
    .then(responseData => {console.log(responseData); return responseData;})
    .then(data => {this.setState({"questions" : data});})

    .catch(err => {
        console.log("fetch error" + err);
    });
}

【讨论】：

【解决方案4】：

因为你没有在第一次返回 response.json()。

【讨论】：

【解决方案5】：

import React, {useEffect} from 'react';

useEffect(() => {
    getRecipes();
  }, []);

  const getRecipes = async () => {
    const response = await fetch(
      `https://........`
    );
    const data = await response.json();
    console.log(data);

使用此方法可以轻松获取数据。

【讨论】：

【解决方案6】：

fetch(weatherIng + zipCode +apiKey)
        .then(response => response.json())

      .then(response => {
     console.log(response.main);
     this.setState({
       weather: ((response.main.temp * (9/5))-459.67).toFixed(0),
       humidity:((response.main.humidity * (9/5))-459.67).toFixed(0)
     })

如果你不将它包含在它自己中，它会认为你正在尝试声明它：

  .then(response => {
     console.log(response.main);
     }) . " around the this.setState

【讨论】：