React Native使用/不使用wifi获取不同的结果

时间:2017-08-16 06:02:52

标签: node.js rest reactjs react-native fetch-api

我在设备上测试了我的ReactNative-App时遇到了一些奇怪的行为。在哪里你可以告诉我我做错了什么。

首先,我有一个REST-API返回帖子列表。这里有一些邮递员请求的输出(它与应用程序中的URL相同):

{
    "status": 200,
    "data": [
        {
            "id": "6bb373c6dbe8c4782121068223a1d5bf710a14a62943443bdc5c017ce873935a",
            "description": "",
            "upvotes": 0,
            "downvotes": 0,
            "creationTime": "2017-08-16T04:44:03Z"
        },
        {
            "id": "5ae791aa33512dc179f075649f68731f269c366a37807f7da9eeeabafcda8c7d",
            "description": "",
            "upvotes": 0,
            "downvotes": 0,
            "creationTime": "2017-08-16T04:42:27Z"
        },
    ],
    "version": "0.0.1",
    "servertime": "2017-08-16T07:02:32.250978864+02:00"
}

我希望通过wifi 移动互联网获取此对象。

这里有用于在我的应用中请求我的API的代码:

exports.getPosts = function() {
    return fetch(HTTP.baseurl + "/image", {
        method: "GET"
    }).then(res => res.json()).then((res)=>{
        //this is the line you will see the output from
        console.log(JSON.stringify(res, null, 2));
        return res
    });
}

如果使用wifi请求API,我会获得与邮递员相同的对象。 但如果通过移动互联网提出要求,我会得到以下内容:

{
    "status": 200,
    "data": {
        "id": "5ae791aa33512dc179f075649f68731f269c366a37807f7da9eeeabafcda8c7d",
        "description": "",
        "upvotes": 0,
        "downvotes": 0,
        "creationTime": "2017-08-16T06:42:27.37228137+02:00"
    },
    "version": "0.0.1",
    "servertime": "2017-08-16T06:42:27.4874009+02:00"
}

经过测试:

macOS:        10.12.6
XCode:         8.3.3
iOS:          10.3.3 (iPhone 6)
node:          8.4.0
react:        16.0.0-alpha.12
react-native:  0.45.1

编辑:

我还在一个新的反应原生应用上复制了它,只插入以下代码行:

//first send an image to the API
fetch("http://services.impressions-app.com/test/image", {
        method: "POST",
        body: JSON.stringify({"blob": blob, "description": ""})
    }).then(res => res.json()).then(res => {
        //then request all the images including the new one
        return fetch("http://services.impressions-app.com/test/image", {
            method: "GET"
        })
    }).then(res => res.json()).then(res => {
        //should log an array of imageobjects (see postman response above)
        console.log("LOADED", res);
    }).catch(e => {
        console.error(e)
    });

我有一个像上面这样的对象,数据作为对象而不是数组:

{
    "status": 200,
    "data": {
        "id": "06c50436c2b2b671a64ce3b57b6cac76b648a83ed621305a0f6a55f8186957ba",
        "description": "",
        "upvotes": 0,
        "downvotes": 0,
        "creationTime": "2017-08-17T08:00:24.198626835+02:00"
    },
    "version": "0.0.1",
    "servertime": "2017-08-17T08:00:26.031231455+02:00"
}

经过测试:

macOS:        10.12.6
XCode:         8.3.3
iOS:          10.3.3 (iPhone 6)
node:          8.4.0
react:        16.0.0-alpha.12
react-native:  0.45.1

编辑#2:

我看了日志文件,当我通过wifi请求时它只记录了这个请求。其他请求按预期记录。

也许这是一个缓存问题?

你们中有没有人有类似的问题?

非常感谢

1 个答案:

答案 0 :(得分:0)

问题如下:

简短版本:

这是一个缓存问题。

如果您想确保再次调用API,可以在网址中添加自动增量。

"https://yourapi.com?1"
"https://yourapi.com?2"
"https://yourapi.com?3"

长版:

在触发上述请求之前,我发出了另一个请求,即POST到同一个网址。该帖子返回了这样一个对象:

{
    "status": 200,
    "data": {
        "id": "06c50436c2b2b671a64ce3b57b6cac76b648a83ed621305a0f6a55f8186957ba",
        "description": "",
        "upvotes": 0,
        "downvotes": 0,
        "creationTime": "2017-08-17T08:00:24.198626835+02:00"
    },
    "version": "0.0.1",
    "servertime": "2017-08-17T08:00:26.031231455+02:00"
}

通过GET请求原始网址时,此对象已缓存并返回。

这可能是React Native的一个问题,因为我希望只使用相同的方法从之前调用的URL获取URL的缓存值。

像这样:

POST "https://yourapi.com" => "foo"
GET  "https://yourapi.com" => "bar" (not cached)
GET  "https://yourapi.com" => "bar" (cached)

并且喜欢这样:

POST "https://yourapi.com" => "foo"
GET  "https://yourapi.com" => "foo" (cached)
GET  "https://yourapi.com" => "foo" (cached)