2017-08-16 1 views
3

J'ai rencontré un comportement étrange tester mon ReactNative-App sur mon appareil. Où vous pourriez me dire ce que je fais mal.Réagir natif chercher un résultat différent avec/sans wifi

Frist de tout j'ai une REST-API retournant une liste de messages. Voici quelques sortie demandée avec postman (il est la même URL que plus tard dans l'application):

{ 
    "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" 
} 

j'espérer obtenir cet objet sur le wifi et Internet mobile.

Voici le codesnipped pour demander mon API dans mon application:

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

Si l'API demande avec wifi je reçois le même objet que dans postier. Mais la demande avec l'Internet mobile, je reçois l'objet suivant:

{ 
    "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" 
} 

Testé sur:

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 

EDIT:

Je reproduis aussi sur une nouvelle réagir application native n'insérant les lignes suivantes de code:

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

J'ai obtenu un objet comme ci-dessus avec d ata comme un objet au lieu d'un tableau:

{ 
    "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" 
} 

Testé sur:

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 

EDIT # 2:

J'ai regardé les fichiers journaux et journalisés cette demande quand j'ai demandé sur le wifi . Les autres demandes ont été consignées comme prévu.

Peut-être que c'est un problème de mise en cache?

Quelqu'un parmi vous a-t-il eu un problème similaire?

merci beaucoup

+0

Les deux réponses ne sont pas dans la même structure, première réponse 'data' propriété est un tableau, mais dans la deuxième la réponse 'data' est un objet. Êtes-vous sûr qu'ils viennent de la même source? –

+0

Je ne connais pas l'API mais, il y a une chance que le développeur backend ait programmé son application pour renvoyer un objet s'il n'y a qu'un seul résultat, et renvoyer un tableau dans le cas contraire. – eden

+0

@VahidBoreiri oui, ils sont certainement de la même source parce que je n'ai rien changé, sauf le commutateur wifi. –

Répondre

0

Le problème était le suivant:

Version courte:

Il est un problème de mise en cache.

Si vous voulez être sûr d'appeler à nouveau l'API, vous pouvez ajouter un incrément automatique à l'URL.

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

Version longue:

Avant de tirer la demande mentionnée ci-dessus, j'ai tiré une autre demande, qui était un POST à la même URL.Ce poste a renvoyé un objet comme celui-ci:

{ 
    "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" 
} 

Cet objet a été mis en mémoire cache et est retourné en demandant l'URL d'origine via GET.

Cela peut être un problème pour React Native puisque je m'attendais à obtenir uniquement des valeurs en cache pour les URL provenant d'URL que j'ai appelées auparavant avec la même méthode.

Comme ceci:

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

Et PAS comme ceci:

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