如何修复'unexpected end of JSON input'报错问题？

你的问题出在makeRequest函数中：当请求返回非201状态码时，服务器可能没有返回有效的JSON内容（甚至是空响应），但你依然直接对request.response执行JSON.parse()，这就会触发JSON解析不完整的错误。

修复方案 #

在解析JSON前先检查响应内容是否有效，同时捕获解析失败的情况，确保错误处理逻辑更健壮：

// Get form elements
const titleInput = document.getElementById('title');
const contentInput = document.getElementById('content');
const submitButton = document.getElementById('submit-button');

const url = 'https://us-central1-open-classrooms-js-for-the-web.cloudfunctions.net/widgets';

// Get DOM elements for showing response
const responseMessage = document.getElementById('response-message');
const responseTitle = document.getElementById('response-title');
const responseId = document.getElementById('response-id');
const responseContent = document.getElementById('response-content');

submitButton.addEventListener('click', ($event) => {
  $event.preventDefault();
  const post = {
    title: titleInput.value,
    content: contentInput.value
  };
  submitFormData(post);
});

function makeRequest(data) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('POST', url + '/create-post');
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        let responseData;
        // 先尝试解析响应，捕获解析失败的情况
        try {
          responseData = request.response ? JSON.parse(request.response) : null;
        } catch (parseError) {
          return reject({ error: '服务器响应格式异常' });
        }

        if (request.status === 201) {
          resolve(responseData);
        } else {
          // 无有效响应数据时使用默认错误提示
          reject(responseData || { error: '请求失败，请稍后重试' });
        }
      }
    };
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(JSON.stringify(data));
  });
}

async function submitFormData(post) {
  try {
    const requestPromise = makeRequest(post);
    const response = await requestPromise;
    responseMessage.textContent = response.message;
    responseTitle.textContent = response.post.title;
    responseId.textContent = response.post.id;
    responseContent.textContent = response.post.content; 
  } catch (errorResponse) { 
    responseMessage.textContent = errorResponse.error;
  }
};

修改说明 #

• 增加响应内容判断：解析前先确认request.response不为空，避免解析空字符串报错
• 包裹解析逻辑：用try-catch捕获JSON解析失败的场景，返回友好提示
• 兜底错误信息：当服务器无有效响应数据时，提供默认错误文案，保证UI能正常展示提示

内容的提问来源于stack exchange，提问作者frontroad