React中Fetch请求报错：Unhandled Rejection (SyntaxError) JSON输入意外结束

对接运行在8000端口的Node API，原本功能正常，添加新Fetch函数后出现报错：Unhandled Rejection (SyntaxError): Unexpected end of JSON input

报错相关代码 #

request.js

const API_URL = 'http://localhost:8000';
async function httpGetPlanets() {
       7 | const response = await fetch(`${API_URL}/planets`);
       8 | // Load planets and return as JSON.
    >  9 | return await response.json();
         | ^  10 | }


 13 | 
  14 | async function httpGetLaunches() {
  15 |   const response = await fetch(`${API_URL}/launches`,{method:'GET'});
> 16 |   const fetchedLaunches = await response.json();
  17 |   return fetchedLaunches.sort((a, b) => {
  18 |     return a.flightNumber - b.flightNumber;
  19 |   });

usePlanet.js

6 | const [planets, savePlanets] = useState([]);
       7 | 
       8 | const getPlanets = useCallback(async () => {
    >  9 |   const fetchedPlanets = await httpGetPlanets();
         | ^  10 |   savePlanets(fetchedPlanets);
      11 | }, []);
      12 |   15 | const [isPendingLaunch, setPendingLaunch] = useState(false);

  

  17 | const getLaunches = useCallback(async () => {
> 18 |   const fetchedLaunches = await httpGetLaunches();
     | ^  19 |   saveLaunches(fetchedLaunches);
  20 | }, []);
  21 | 

新增的Fetch函数

async function httpSubmitLaunch(launch) {
  try {
    //await the promise returned by the fetch function when we make a post request to our api_url 
     return await fetch(`${API_URL}/launches`, {
      method: "post",
      // if we pass json we have to fix one header
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(launch)
    }) 
 }
     catch (err) {
    return {
      ok: false,
    }
  }
}

这个报错核心原因是调用response.json()时，服务器返回的不是有效JSON数据（可能是空响应、非JSON格式，或HTTP状态码错误）。结合新增POST请求的场景，从以下几点处理：

1. 先确认GET请求的响应状态 #

打开浏览器开发者工具（F12）→ 网络面板，刷新页面查看/planets和/launches请求：

• 检查HTTP状态码：如果是4xx/5xx，优先修复服务器端错误。
• 查看响应内容：确认返回的是合法JSON，不是空字符串或HTML错误页面。

2. 修复新增POST函数的问题 #

你的httpSubmitLaunch存在两个关键问题，可能间接导致服务器异常：

• fetch默认不会对4xx/5xx状态码抛出异常，若服务器返回错误状态，直接返回Response对象会导致后续处理混乱；
• 成功与失败的返回值格式不统一，调用方逻辑易出错。

修改后的代码：

async function httpSubmitLaunch(launch) {
  try {
    const response = await fetch(`${API_URL}/launches`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(launch)
    });

    // 手动处理HTTP错误状态
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({ message: "服务器返回非JSON错误" }));
      return { ok: false, error: errorData };
    }

    const data = await response.json();
    return { ok: true, data };
  } catch (err) {
    return { ok: false, error: { message: "网络请求失败" } };
  }
}

3. 给GET请求添加错误处理 #

原有GET函数未处理异常，一旦服务器返回非JSON响应就会抛出未捕获错误，修改如下：

修改httpGetPlanets #

async function httpGetPlanets() {
  try {
    const response = await fetch(`${API_URL}/planets`);
    if (!response.ok) {
      throw new Error(`HTTP错误状态：${response.status}`);
    }
    return await response.json();
  } catch (err) {
    console.error("获取行星数据失败：", err);
    return [];
  }
}

修改httpGetLaunches #

async function httpGetLaunches() {
  try {
    const response = await fetch(`${API_URL}/launches`, { method: 'GET' });
    if (!response.ok) {
      throw new Error(`HTTP错误状态：${response.status}`);
    }
    const fetchedLaunches = await response.json();
    return fetchedLaunches.sort((a, b) => a.flightNumber - b.flightNumber);
  } catch (err) {
    console.error("获取发射数据失败：", err);
    return [];
  }
}

4. 检查服务器端POST接口 #

新增POST请求后服务器可能出现异常，导致后续GET请求无响应：

• 确认Node API的/launches POST接口已正确解析JSON请求体（如Express框架需使用express.json()中间件）；
• 确保接口处理完请求后返回有效JSON响应，而非空响应或错误页面；
• 排查服务器端是否存在未捕获的异常，导致服务崩溃或挂起。

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