2015-10-20 15 views
20

Podczas korzystania pobrania:
sprowadzić response.json() daje responseData = niezdefiniowany

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

następujące prace prace, wiesz dlaczego? :

JSON.parse(response._bodyText) 

Odpowiedz

11

odpowiedź łańcuchowym powinien wyglądać mniej więcej tak, konkretnie część response.json. Następnie powinieneś pobrać obiekt z powrotem w console.log.

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

    console.log(response); 
+1

. Dodałem '.then (response => response.json())' i zadziałało. Czy możesz mi powiedzieć, dlaczego jest dodany, kiedy nie ma sensu? –

+2

jeśli wykonujesz wywołanie zwrotne z nawiasami klamrowymi, powinieneś "zwrócić response.json()'. Uproszczona forma 'response => response.json()' zawiera niejawną instrukcję return. –

31

Pobieranie jest trochę trudne do uchwycenia. Jestem nowy w tym, więc nie zestrzel mnie, jeśli płomienie tutaj, ale dane odpowiedzi to kolejna obietnica i musisz zwrócić dane odpowiedzi, a następnie obsłużyć tę obietnicę kolejnym stwierdzeniem, w którym możesz w końcu zarejestrować odpowiedź, a także twojemu brakowi zwrotu oświadczenia w swoich obietnicach:

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

nadzieję, że pomaga zobaczyć: https://jsfiddle.net/byz17L4L/

+1

W moim przypadku wystarczyło drugie '.then (responseData)'. Dzięki! – JohnnyQ

+0

Dobrze, że JohnnyQ zaktualizowałem to i dodałem do niego skrzypce działające tylko z 2 następnie –

2

ponieważ w pierwszym przypadku nie zwrócono response.json().

4

Oto jak to w końcu pracował w moim przypadku:

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

Będzie myśleć, że staramy się deklarować coś jeśli nie ująć ją w jej własnym:

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