JSON端点不存在时如何编写If/else逻辑保证函数正常返回值

代码抛出错误和判断条件里的undefined没有关系，核心是两个缺失的校验逻辑：

• 没有校验HTTP请求状态：当端点不存在、请求出错时，XHR返回的HTTP状态码不是200，xhr.responseText可能是错误页面内容、空字符串，直接执行JSON.parse()会直接抛出语法错误。
• 没有做深层属性的安全读取：你直接链式访问weather.MRData.RaceTable.Races[0].Sprint.date，只要访问链路里任意一级属性不存在（比如目标赛事根本没有Sprint字段），JS就会抛出Cannot read properties of undefined的类型错误，你只判断最后一级date是否为undefined，完全覆盖不到中间层级缺失的场景。

修复逻辑分三层：先校验请求是否成功，再捕获JSON解析异常，最后用安全方式读取深层属性，所有异常场景都统一返回默认的空字符串即可：

var main = function(){
  json_url = "http://ergast.com/api/f1/current/last.json";
  xhr = new XMLHttpRequest();
  xhr.open("GET", json_url, false);
  xhr.send(null);

  let race = " ";
  // 先判断请求是否成功，状态码200才继续处理
  if (xhr.status !== 200) return race;

  try {
    weather = JSON.parse(xhr.responseText);
    // 用可选链?.安全读取深层属性，任意一层不存在就返回undefined
    // 配合空值合并运算符??，值为null/undefined时直接返回默认空值
    race = weather?.MRData?.RaceTable?.Races?.[0]?.Sprint?.date ?? " ";
  } catch (err) {
    // 捕获JSON解析失败、结构异常的所有错误，返回默认值
    race = " ";
  }

  return race;
}

• 不需要把判断条件里的undefined换成其他值，可选链+空值合并的写法已经覆盖了所有层级属性不存在的场景，比逐层写if判断简洁很多。
• 同步XHR请求会阻塞主线程执行，用户体验很差，正式环境建议替换为异步请求或者fetch写法。

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