Как исправить "Неожиданный конец JSON ввода", возникающий при отправке запроса POST на сервер с помощью выборки?

Question

У меня есть простой пользовательский интерфейс чата, который интегрирован в чат-бота, разработанного с использованием .netcore.

SyntaxError: Неожиданный конец JSON input
(анонимный) @ im. html: 201

Я получаю эту ошибку после того, как пару разговоров с ботом. Ниже показано поле ввода, которое я использую для захвата текстового сообщения.

<form action="javascript:void(0);" class="bg-light" autocomplete="off">
  <div class="input-group">
    <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4" id="message">
    <div class="input-group-append">
      <button id="button-addon2" type="submit" class="btn btn-link" onclick="userMessage()"> <i class="fa fa-paper-plane"></i></button>
    </div>
  </div>
</form>

Когда пользователь нажимает клавишу ввода, я показываю набранное сообщение в пользовательском интерфейсе и отправляю запрос POST на сервер, чтобы получить ответ.

 // User message layout
function userMessage() {
    var spinner = document.getElementById('textSpinner');
    var h5 = document.getElementById("h5");
    var inputBox = document.getElementById("message");
    var p = document.createElement("p");
    var inputValue = inputBox.value;
    var text = document.createTextNode(inputValue);
    p.appendChild(text);

    if (inputValue === '' || !h5.innerText) {
        alert("Please sart the session first!");
    } else {
        var div = document.createElement("div");
        div.className = "media";

          /.../

        var chatArea = document.getElementById('chat-area')
        chatArea.scrollIntoView({ behavior: 'smooth', block: 'end' })
        spinner.style.display = "none";
        interact(h5.innerText, inputValue);
    }
    inputBox.value = "";
}

Ниже представлен запрос POST

   // POST user message
   function interact(userId, message) {
    var spinner = document.getElementById('textSpinner');
    spinner.style.display = "block";
    const payload = {
        userId: userId,
        utterance: message
    };

    fetch('Sessions/Interact', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    })
        .then(response => response.json())
        .then(data => botMessage(data.Message))
        .then(() => spinner.style.display = "none")
        .catch(error => console.error(error));
    }

Когда я получаю ответ от сервера, я вызываю другую функцию с именем botMessage(), которая похожа на userMessage() который отобразит сообщение бота. Может ли кто-нибудь объяснить мне, почему возникает эта ошибка, и есть ли решение для ее устранения? Заранее спасибо.

Вот тело ответа от сервера.

{
  "Message": "Hello, It's me. Let's start chatting shall we?",
  "Data": null
}

Answer 1

Я изменил обработку ответа, как показано ниже. Правильный ли мой подход? Пожалуйста, поправьте меня, если я ошибаюсь.

.then(response => {
      if (response.status === 200) {
         return response.json()
         .then(data => botMessage(data.Message))
      } else if (response.status === 204) {
         return;
      }
    })           
    .then(() => spinner.style.display = "none")
    .catch(error => console.error(error));