web-dev-qa-db-fra.com

SyntaxError non capturée (en promesse): fin inattendue de l'entrée JSON

J'essaie d'envoyer un nouvel abonnement Push à mon serveur mais je rencontre une erreur "Uncaught (in promise) SyntaxError: Fin inattendue de l'entrée JSON" et la console dit que c'est dans ma page d'index à la ligne 1, ce qui n'est évidemment pas le cas .

La fonction où je soupçonne que le problème se produit (car l'erreur n'est pas levée lorsque je le commente) est sendSubscriptionToBackEnd(subscription) qui est appelée comme suit:

function updateSubscriptionOnServer(subscription) {
  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails = document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    sendSubscriptionToBackEnd(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

La fonction elle-même (qui précède la fonction ci-dessus):

 function sendSubscriptionToBackEnd(subscription) {
  return fetch('/path/to/app/savesub.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  })
  .then(function(response) {
    if (!response.ok) {
      throw new Error('Bad status code from server.');
    }

    return response.json();
  })
  .then(function(responseData) {
    if (!(responseData.data && responseData.data.success)) {
      throw new Error('Bad response from server.');
    }
  });
}

J'ai essayé de remplacer les guillemets simples par des guillemets doubles dans l'appel de récupération, mais cela donne les mêmes résultats.

Je sais que le JSON doit être rempli car il s'imprime à l'écran dans la fonction updateSubscriptionOnServer() avec subscriptionJson.textContent = JSON.stringify(subscription);, et j'ai utilisé cette sortie dans l'exemple de serveur de Google Codelab pour recevoir un Push avec succès.

EDIT: Voici le JSON sous forme de chaîne, mais je ne vois pas d'erreur de syntaxe:

{"endpoint":"https://fcm.googleapis.com/fcm/send/dLmthm1wZuc:APA91bGULRezL7SzZKywF2wiS50hXNaLqjJxJ869y8wiWLA3Y_1pHqTI458VIhJZkyOsRMO2xBS77erpmKUp-Tg0sMkYHkuUJCI8wEid1jMESeO2ExjNhNC9OS1DQT2j05BaRgckFbCN","keys":{"p256dh":"BBz2c7S5uiKR-SE2fYJrjPaxuAiFiLogxsJbl8S1A_fQrOEH4_LQjp8qocIxOFEicpcf4PHZksAtA8zKJG9pMzs=","auth":"VOHh5P-1ZTupRXTMs4VhlQ=="}}

Des idées??

javascriptjsonweb-push
4
zoltar

Pour quelqu'un qui regarde ici plus tard. J'ai reçu cette erreur non pas à cause de mes en-têtes mais parce que je n'ajoutais pas récursivement le corps de réponse à une chaîne à JSON.parse plus tard.

Selon le exemple MDN (j'ai retiré certaines parties de leur exemple qui ne sont pas immédiatement pertinentes):

reader.read().then(function processText({ done, value }) {
    if (done) {
      console.log("Stream complete");
      return;
    }
    result += chunk;
    return reader.read().then(processText);
  });

Pour mon problème, je devais

  1. Utilisez une fonction nommée (pas un anonyme () => {}) à l'intérieur du .then
  2. Ajoutez le résultat ensemble récursivement.
  3. Une fois cela fait, exécutez autre chose sur le résultat total ajouté

Juste au cas où cela vous serait utile à l'avenir et que votre problème n'est pas lié à l'en-tête, mais lié à la valeur effectuée qui n'est pas vraie avec la réponse initiale du flux JSON.

0
Kai Durai