反应js与redux fetch总是返回一个空的json

时间:2016-04-27 13:55:36

标签: javascript reactjs fetch redux

我正在尝试在没有调用Ajax的情况下请求一个API(为什么我要导入整个库来简单地进行ajax调用?)。

所以我决定按照Redux doc(我上周迁移)中描述的fetch函数流程进行操作。

import fetch from 'isomorphic-fetch'

因此,我有这个简短的功能:

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

但是当我在下一步功能中执行console.log时:

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

我可以看到我的json是一个空对象。

网络返回此信息:

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

部首: 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

我做错了吗?

1 个答案:

答案 0 :(得分:2)

您的redux语法看起来是正确的,但看起来请求是OPTIONS请求而不是GET请求。尝试将method: 'GET'添加到您的抓取选项中。

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