3
votes

Erreur: SyntaxError: fin inattendue de l'entrée JSON à fetch.then.response

J'obtiens cette erreur chaque fois que j'essaye d'utiliser la méthode POST dans mon API.

Response {
type: "cors",
url: "myURL/test",
redirected: false,
status: 201,
ok: true,
â€¦}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 201
statusText: ""
type: "cors"
: "myURL/test"
__proto__: Response

Lorsque j'utilise la méthode GET, j'obtiens les données normalement. Voici le code:

.then(response => console.log(response))

Quelqu'un peut-il m'aider? Merci.

MODIFIER: J'ajoute simplement cette ligne pour voir le journal:

const teste = () => {
fetch("myURL/test", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        id: 1,
        name: "Teste",
        amount: 1,
        value: 3
    })
})
.then(response => response.json()) //Here is the error
.then(data => {
    console.log(data);
})
.catch((err)=>console.log(err))}

Voici ce que j'ai obtenu:

SyntaxError: Unexpected end of JSON input at fetch.then.response

javascript api fetch post

6 commentaires

Eh bien, à quoi ressemble la réponse?

@Pointy Je viens de recevoir cette erreur: SyntaxError: Fin inattendue de l'entrée JSON à fetch.then.response

À propos du commentaire de @ pointy, vous pouvez voir à quoi ressemble la réponse en remplaçant then (resp => resp.json ()) par then (resp => resp.text ()). Puis (console.log) et modifiez votre réponse en incluant le texte consigné

Ou regardez simplement dans l'onglet "Réseau" des outils de développement du navigateur

@NinoFiliu J'ai fait ce que tu as dit.

Non, c'est l'objet Response , je pense que vous avez oublié resp => resp.text ()

3 Réponses :

9
votes

Cela signifie que la page récupérée à myURL / test ne répond pas avec du contenu JSON ou avec un contenu JSON mal formé. Ce n'est pas une erreur dans votre script, ce qui est très bien, c'est une erreur avec votre serveur, qui ne diffuse pas de contenu JSON sur myURL / test .

Notez également que les serveurs peuvent ne pas répondre de la même manière aux requêtes GET et POST pour la même URL! Si vous récupérez un JSON valide à partir d'une requête GET mais que, comme vous l'avez décrit, vous ne parvenez pas à récupérer un JSON valide à partir d'une requête POST, votre serveur peut proposer un contenu différent selon le type de requête. Examinez cela.

Conseils de débogage

Remplacez puis (resp => resp.json ()) par puis (resp => resp.text ()). puis (console.log) pour voir à quoi ressemble le contenu diffusé
Utilisez Postman pour simuler les appels d'API et voir à quoi ressemble le contenu diffusé, avec plus de détails
Examinez la réponse avec les outils de développement:
1. Dans Chrome
2. Ouvrez la console (F12)
3. Accédez à l'onglet réseau
4. Cliquez sur le serveur de fichiers par myURL/test
5. Cliquez sur response : ce sera le contenu du texte. Il doit être correctement formaté en JSON.

5 commentaires

Les outils de développement du navigateur afficheront le texte complet de la requête et de la réponse HTTP.

En effet! Je modifierai ma réponse pour l'inclure. Je n'ai jamais vraiment utilisé les outils de développement en tant que débutant, alors j'ai seulement pensé à suggérer des astuces de script uniquement.

@NinoFiliu Lorsque j'utilise la méthode GET, voici ce que j'obtiens: [{"id": 1, "name": "Coca-cola", "amount": 1, "value": 2.5}]

Essayez de publier le corps: {data: {I: 1, name: "test #"}}

@RicardoSanches que vous récupérez avec POST mais n'obtenez du JSON valide qu'avec GET, votre serveur sert donc un contenu différent en fonction de POST / GET. Voir le paragraphe ajouté dans ma réponse.

0
votes

En gros, la méthode GET n'envoie pas votre objet body au serveur dans lequel vous obtenez la réponse. Seule l'action POST enverra votre objet corps au serveur.

Je suppose que l'objet que vous souhaitez envoyer est le problème. Soit le serveur auquel vous essayez de vous connecter n'attend pas l'objet body sous forme de chaîne, soit vous devez vous assurer que vous avez correctement analysé le JSON avant le traitement.

1 commentaires

Je pense que tu as raison. J'utilise SwaggerHub pour créer l'API et je pense que cela pourrait être le problème.

0
votes

On dirait que l'API que vous appelez n'a pas de corps de réponse sur ce POST particulier. Ensuite, lorsque vous appelez response.json () (convertissant response.body en json), il se produit une erreur. Ou peut-être que la réponse est que le corps n'est pas un corps json valide.

Si vous voulez gérer cette erreur de manière plus mode, vous pouvez procéder comme suit:

tryGetJson = async (resp) => {
    return new Promise((resolve) => {
      if (resp) {
        resp.json().then(json => resolve(json)).catch(() => resolve(null))
      } else {
        resolve(null)
      }
    })
  }

https://github.com/github/fetch/issues/268#issuecomment-399497478 a >

0 commentaires