调用themealdb公共API时出现JSON解析错误的排查求助

嘿，刚接触Web开发遇到这种问题太正常啦，我帮你看了下代码，核心问题其实很容易解决，还有几个小细节要注意：

主要错误原因：URL缺少协议头 #

你所有fetch调用里的URL都没加https://前缀，比如www.themealdb.com/api/json/v1/1/random.php。浏览器会把这种没有协议的URL当成当前网站的相对路径去请求，而不是去访问ThemealDB的公共API，所以拿到的响应根本不是合法的JSON数据，自然会触发JSON解析失败的错误。

修复步骤 #

• 给所有API URL加上https://前缀
  这是最关键的一步，修改后每个fetch的URL应该是这样的：https://www.themealdb.com/api/json/v1/1/random.php
• 修正参数名不一致的问题
  第二个函数getMealByawaitId里的参数是大写的Id，但你拼接URL的时候用的是小写的id，这会导致变量未定义的错误，要把参数名统一成小写的id（或者反过来，保持一致就行）。

修复后的完整代码 #

getRandomMeal();

async function getRandomMeal() {
  // 加上https://前缀
  const resp = await fetch("https://www.themealdb.com/api/json/v1/1/random.php");
  // 可以加个判断，确保请求成功再解析
  if (!resp.ok) {
    throw new Error(`请求失败，状态码：${resp.status}`);
  }
  const randomMeal = await resp.json();
  console.log(randomMeal);
}

async function getMealById(id) {
  // 修正参数名，加上https://前缀
  const resp = await fetch(
    "https://www.themealdb.com/api/json/v1/1/lookup.php?i=" + id
  );
  if (!resp.ok) {
    throw new Error(`请求失败，状态码：${resp.status}`);
  }
  const meal = await resp.json();
  return meal;
}

async function getMealBySearch(term) {
  // 加上https://前缀
  const resp = await fetch(
    "https://www.themealdb.com/api/json/v1/1/search.php?s=" + term
  );
  if (!resp.ok) {
    throw new Error(`请求失败，状态码：${resp.status}`);
  }
  const meals = await resp.json();
  return meals;
}

额外调试小技巧 #

以后遇到API请求问题，可以先打印resp对象看看status状态码：

• 如果是404，大概率是URL写错了
• 如果是200但解析JSON失败，就用resp.text()先打印响应内容，看看是不是真的JSON格式

这样能更快定位问题哦～

备注：内容来源于stack exchange，提问作者saribcantcode