Axios: Parfois, response.data est une chaîne au lieu d'un objet

@huy-lv,

Le content-type le même pour les deux réponses ?

@robmcguinness Oui, c'est application/json

Je vois le même comportement. J'ai trouvé que dans mon cas, la réponse de l'API contenait parfois des données JSON non valides, c'est- JSON.parse dire que data .

J'ai aussi ce problème. Lorsque je vérifie response.data du problème, une chaîne JSON invalide comme des données " ajoutées à la réponse, ce qui fait que JSON.parse a une erreur et renvoie une chaîne.

J'ai vérifié avec Axios, XMLHttpRequest, fetch
1./ Axios et XMLHttpRequest ont le même problème
2./ récupérer le travail parfaitement

Je sais que certains caractères peuvent conduire à ce problème, il suffit d'être sûr.
Pourriez-vous capturer la réponse et la joindre en tant que fichier ?

@OpenGG désolé pour la réponse tardive, ce dont vous avez besoin ici :D
https://1drv.ms/t/s!AnakDtCf8CG5hIgn2Hemy6zanFi50Q

@huy-lv Pas ce à quoi je m'attendais. Veuillez enregistrer la réponse avec curl, puis joignez le fichier enregistré en le déposant dans la zone de réponse de ce problème.

@huy-lv

Peu importe, je l'ai trouvé.
Je l'ai collé sur l'essentiel et j'ai essayé de charger avec axios, je ne vois aucune erreur.

fichier : https://gist.github.com/OpenGG/ac72e79f9ef088e993213473116c0cd0
démo : https://codepen.io/OpenGG/pen/bxEqKL

je sais, ce problème n'arrive pas tout le temps, c'est environ 1 à 2 fois toutes les 10 requêtes (même API, même réponse)

@OpenGG cela se produit sur React-Native. L'application Web fonctionne parfaitement.

@nighttiger1990

Pourriez-vous faire une démo en ligne sur expo, et la partager ? Cette démo doit faire la même demande avec Axios et XMLHttpRequest, pour déterminer si Axios ou RN causent ce problème.

@OpenGG pouvez-vous me donner votre courrier, je vous enverrai une API, je ne peux pas le
https://github.com/nighttiger1990/axiosBug.git

Une chance avec ce problème? j'y fais face aussi

@Druthi maintenant

toute mise à jour?

Ce n'est peut-être pas ton cas mais dans mon cas :
Ma chaîne de réponse API n'est pas un JSON valide, donc axios ne peut pas analyser en JSON, puis il renvoie une chaîne brute à la place.

J'ai migré mon application (redux-saga, axios) vers webpack4 et maintenant response.data est une chaîne au lieu d'un objet. Les modifications de migration que j'ai apportées sont minimes pour une compilation réussie
package.json
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "^3.6.1",
"webpack-dev-server": "^3.2.1"
"file-loader": "^3.0.1",

webpack-config.js
mode ajouté : 'développement', à module.exports
couleurs commentées : true, dans devServer
a commenté json-loader

J'ai exécuté JSON.parse(response.data) et le JSON est corrompu. (Jeton inattendu : en JSON à la position 8181)

            "municipality": "ddrNote": ""      should be

            "municipality": "",
            "addrNote": ""

J'ai comparé avec mon code webpack3 de pré-migration où le JSON dans response.data est OK (objet). Ainsi, le code migré parvient à corrompre le JSON dans response.data et c'est pourquoi il apparaît sous forme de chaîne. Alors maintenant, la question est de savoir pourquoi le JSON est corrompu

J'ai résolu le problème en rétrogradant à "webpack-dev-server": "3.1.10"

J'ai un proxy devServer qui, je suppose, est la cause de la corruption de la réponse pour les versions supérieures à 3.1.10

@petercutting c'est aussi un problème dans l'environnement de production, n'avez-vous pas remarqué ?

@nyilmaz mon problème s'est avéré être causé par webpack-dev-server. webpack-dev-server ne serait pas utilisé dans un environnement de production

@petercutting avez-vous ouvert un problème contre webpack-dev-server? Je n'ai pas pu trouver sur.

@goodmorninggoaway Je ne me souviens pas. probablement pas

Indépendamment des problèmes de webpack-dev-server, Axios ne devrait pas avaler en silence les exceptions JSON.parse , n'est-ce pas ?

Je testais juste la robustesse d'une application en envoyant du JSON malformé depuis le backend. La requête Axios échoue silencieusement à décoder le JSON. L'en-tête content-type indique toujours "application/json" , mais response.data est la chaîne brute non analysée et mon application se bloque de manière inattendue.

C'est assez fou qu'une bibliothèque avec 60k étoiles ait un bug aussi basique pendant six mois :confused:

Indépendamment des problèmes de webpack-dev-server, Axios ne devrait pas avaler silencieusement les exceptions JSON.parse, n'est-ce pas ?

Parfaitement valide

Une mise à jour sur ce bug pour réagir natif !?

J'ai trouvé que cela se produit lorsque la réponse json du serveur est invalide, utilisez un validateur json comme https://jsonlint.com/ pour vous assurer que votre json est correctement formaté

Le problème de déglutition d'erreurs est suivi, je vais fermer ce problème car il s'agit essentiellement d'un doublon.

Veuillez nous contacter si vous avez des questions.

@ fed135, veuillez lier le problème pertinent, le cas échéant, merci.

Quelqu'un a-t-il déjà résolu ce problème ?, j'utilise laravel comme API, j'ai donc enregistré ma réponse avant de l'envoyer à mon application. La réponse enregistrée est un JSON valide, mais la dernière accolade "}" est manquante à la fin, ce qui en fait une réponse invalide. Je ne sais pas pourquoi cela se comporte comme ça sur mon application mobile, car pour l'application frontale qui utilise aussi axios, cela fonctionne bien, j'ai également essayé le facteur, cela fonctionne bien. des idées ou des solutions svp ??

Cela se produit lorsque les données deviennent trop volumineuses :( Je n'ai eu aucun problème car le tableau de données était petit !

@matinzd Je pagine mes données et n'en renvoie que 20

@matinzd et aussi, mon application fronend utilise le même point de terminaison, et elle n'en fait pas l'expérience, seule l'application mobile avec react native le fait parfois

@ fed135 Est-ce le bon problème à suivre en tant que suivi ? #61

s'il vous plaît mon api laravel sort comme une chaîne à côté

J'ai enfin trouvé une solution à la mienne.
Les données que j'obtenais étaient ===

J'ai la même erreur
:(

J'ai le même problème, après l'enregistrement jsonlint.com, j'ai les données avec NaN que json ne peut pas analyser comme ci-dessous. Nous devons donc nous assurer que notre backend a envoyé les données JSON valides.

Error: Parse error on line 186:
...,    "position_name": NaN,   "group_name": 
----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'

Même erreur, qui peut la réparer :|

☝️ J'ai fait une brève RP pour régler ce problème. Espérons que cela aide

Obtenir ce problème dans react-native avec axios 0.19.2
Une mise à jour sur le problème ?

J'ai le même problème, j'ai résolu ce problème en changeant la méthode d'axios, si vous aviez la méthode "GET", vous ne pouvez pas envoyer de corps car vous pouvez obtenir ce problème, pour résoudre ce problème, vous devez passer à "POST" et il le fera travailler