使用XHR获取JSON时JavaScript解析异常及后续逻辑失效问题

当document.getElementById()无法在当前DOM中找到对应ID的元素时，会返回null，直接访问null.innerHTML会抛出未捕获的类型错误，直接中断整个xhr.onload回调的执行，导致后续逻辑无法运行。

方案1：封装安全赋值工具函数（推荐） #

提前判断元素是否存在，存在才执行赋值操作，不会中断后续逻辑，还可以复用在所有字段赋值场景，完美适配多页面不同元素的需求。

const xhr = new XMLHttpRequest()
const method = 'GET'
xhr.responseType = 'json'

// 新增安全赋值工具函数
function safeSetInnerHTML(id, content) {
  const el = document.getElementById(id)
  if (el) {
    el.innerHTML = content
  }
}

function buildTable(data){
  // 生成表格前也先判断容器是否存在，避免报错
  const tableContainer = document.getElementById('history-table')
  if (!tableContainer || !data) return
  // 原有生成表格的逻辑保留即可
}

xhr.open(method, requestURL)
xhr.onload = function() {
  // 修正原判断逻辑：400本身就是错误状态码，用>=更准确
  if (xhr.status >= 400){
    console.error(xhr.error)
    return
  }
  const res = xhr.response
  console.log(res)
  // 替换原有直接赋值的逻辑
  safeSetInnerHTML('name', res.name)
  safeSetInnerHTML('status', res.status)
  buildTable(res.history)
  safeSetInnerHTML('description', res.description)
}
xhr.send()

方案2：循环批量赋值（适合字段多的场景） #

如果需要赋值的字段很多，可以提前定义DOM ID和响应字段的映射关系，循环处理，代码更易维护：

// 定义字段映射：键是DOM元素ID，值是对应JSON响应的字段名
const fieldMap = {
  'name': 'name',
  'status': 'status',
  'description': 'description'
}

xhr.onload = function() {
  if (xhr.status >= 400){
    console.error(xhr.error)
    return
  }
  const res = xhr.response
  // 循环批量赋值
  Object.entries(fieldMap).forEach(([elId, resField]) => {
    const el = document.getElementById(elId)
    if (el) {
      el.innerHTML = res[resField]
    }
  })
  buildTable(res.history)
}

兜底方案：新增异常捕获 #

如果不想逐个修改原有赋值逻辑，可以把整个业务逻辑包在try...catch块里，出错时打印错误但不中断后续执行：

xhr.onload = function() {
  if (xhr.status >= 400){
    console.error(xhr.error)
    return
  }
  try {
    const res = xhr.response
    console.log(res)
    document.getElementById('name').innerHTML = res.name 
    document.getElementById('status').innerHTML = res.status
    buildTable(res.history)
    document.getElementById('description').innerHTML = res.description
  } catch (err) {
    console.error('页面渲染出错：', err)
  }
}

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