web-dev-qa-db-ja.com

キャッチされていません（約束されています）SyntaxError：予期しないJSON入力の終わり

新しいPushサブスクリプションをサーバーに送信しようとしていますが、「Uncaught（in promise）SyntaxError：Unexpected end of JSON input」というエラーが発生し、コンソールはそれを1ページ目のインデックスページにあると言っていますが、明らかにそうではありません。 。

問題が発生していると思われる関数（コメント化してもエラーがスローされないため）は、次のように呼び出されるsendSubscriptionToBackEnd(subscription)です。

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

関数自体（上記の関数の前）：

_ 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.');
    }
  });
}
_

フェッチ呼び出しで一重引用符を二重引用符に置き換えてみましたが、同じ結果が得られます。

JSONはupdateSubscriptionOnServer()を使用してsubscriptionJson.textContent = JSON.stringify(subscription);関数の画面に出力されるため、データを入力する必要があることを知っています。Googleのコードラボのサンプルサーバーでその出力を使用して、Pushを正常に受信しました。

編集：これは文字列としてのJSONですが、構文に間違いはありません。

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

何か案は？？

javascriptjsonweb-push
4
zoltar

後でここを探している人のために。ヘッダーが原因ではなく、後でJSON.parseの文字列に応答本文を再帰的に追加していないため、このエラーが発生しました。

MDNの例 のとおり（例の一部はすぐには関係ないので削除しました）：

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

私の問題では、私はしなければなりませんでした

  1. .then内で名前付き関数（無名（）=> {}ではない）を使用する
  2. 結果を再帰的に追加します。
  3. 完了したら、追加された結果全体に対して何か他のことを実行します

これが将来あなたにとって役に立ち、あなたの問題がヘッダーに関連しているのではなく、最初のJSONストリーム応答でdone値がtrueでないことに関連する場合に備えて。

0
Kai Durai