2016-04-27 7 views
2

Ich versuche, eine API ohne Ajax-Aufruf (warum würde ich die gesamte Bibliothek für einfach einen Ajax-Aufruf importieren?) Anfordern.react js mit redux fetch immer eine leere json zurück

Also habe ich mich entschieden, dem Abruf-Funktionsablauf zu folgen, wie er im Redux-Dokument beschrieben ist (mit dem ich letzte Woche migriert habe).

import fetch from 'isomorphic-fetch'

So, ich habe diese kurze Funktion:

export function fetchPosts(value) { 
    return dispatch => { 
     dispatch(requestPosts(value)) 
     return fetch(Config.serverUrl + '/' + value, { 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       Authorization: Config.authorizationToken 
      }, 
     }) 
      .then(response => response.json()) 
      .then(json => dispatch(receivePosts(value, json))) 
    }; 
}; 

aber wenn ich einen console.log in dieser nächsten Schritt Funktion tun:

function receivePosts(value, json) { 
    console.log(json); 
    return { 
     type: RECEIVE_POSTS, 
     value, 
     posts: json.data.children.map(child => child.data) 
    }; 
}; 

kann ich sehen, dass mein JSON ist ein leeres Objekt.

Das Netzwerk Rückkehr dies:

General: Request URL:https://shelob-v2.dev.blippar.com/v2/categories Request Method:OPTIONS Status Code:200 OK Remote Address:52.25.79.166:443

Rubrik: Access-Control-Allow-Headers:Authorization, Content-Type, X-Pouet-UniqueID, X-Pouet-UniqueRunID Access-Control-Allow-Methods:PATCH, PUT, DELETE Access-Control-Allow-Origin:* Content-Length:0 Content-Type:text/plain; charset=utf-8 Date:Wed, 27 Apr 2016 14:14:36 GMT

Bin ich mit ihm etwas definitiv falsch?

+0

Können Sie die Anfrage/Antwort in der Registerkarte Netzwerk (Chrom) betrachten? – azium

Antwort

2

Ihre Redux-Syntax sieht korrekt aus, aber es sieht so aus, als sei die Anfrage eine OPTIONS-Anfrage und keine GET-Anfrage. Versuchen Sie, method: 'GET' zu Ihren Abrufoptionen hinzuzufügen.

export function fetchPosts(value) { 
    return dispatch => { 
     dispatch(requestPosts(value)) 
     return fetch(Config.serverUrl + '/' + value, { 
      method: 'GET', // here 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       Authorization: Config.authorizationToken 
      }, 
     }) 
      .then(response => response.json()) 
      .then(json => dispatch(receivePosts(value, json))) 
    }; 
}; 
+0

In der Tat ist mein JSON diesmal gefüllt! Haben Sie eine Idee, warum ich immer noch diesen Ausgabefehler habe: '' 'Kann Eigenschaft" Kinder "von undefined''' nicht lesen? Ist die Behandlung auf dem JSON von ReceivePosts veraltet? –

+0

Es klingt, als wäre dieser Code falsch: 'json.data.children.map (child => child.data)'. Ich würde Netzwerk-Dev-Tools verwenden oder fügen Sie eine 'console.log (JSON)' in Ihren fetchPosts oder receivePosts, um genau zu wissen, wie Ihre Antwort aussieht und von dort aus gehen. – mgmcdermott