如何避免fetch请求出错时Chrome控制台抛出红色报错？

问题原因 #

1. fetch API 仅在网络故障、跨域拦截等请求无法正常发出的场景才会触发 Promise rejected，404、500这类 HTTP 错误状态不会被默认判定为请求失败，所以普通的 try-catch（未配合 async/await 使用时）无法捕获这类场景的后续报错。
2. 你贴出的代码逻辑不完整，else 分支处理完语音播报后没有终止后续链式调用，若后续代码还尝试对返回值调用 .json() 方法，拿到 undefined 调用方法就会抛出异常。
3. 整个 Promise 链没有添加末尾的 catch 做兜底，所有未被捕获的 Promise 错误都会在 Chrome 控制台抛出红色报错。

修复方案 #

方案1：Promise 链式调用写法

在请求链末尾加兜底 catch，同时在非 2xx 状态分支主动终止后续逻辑：

fetch('https://api.dictionaryapi.dev/api/v2/entries/en/' + def)
  .then(res => {
    if (res.ok) {
      return res.json()
    } else {
      speak(`I don't know exactly what is ${def}`)
      // 主动返回 rejected 状态的 Promise，跳过后续正常处理逻辑
      return Promise.reject('目标单词无查询结果')
    }
  })
  .then(data => {
    // 此处写查询成功后的业务逻辑
    console.log('查询结果：', data)
  })
  // 兜底捕获所有错误，不会抛红
  .catch(err => {
    // 可自行选择是否打印错误用于调试
    console.debug('请求处理异常：', err)
  })

方案2：async/await 搭配 try-catch 写法

这种写法可以让你之前想用的 try-catch 正常生效：

// 注意需要将逻辑放在 async 函数内
async function getWordDefinition(def) {
  try {
    const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/' + def)
    if (res.ok) {
      const data = await res.json()
      // 此处写查询成功后的业务逻辑
      console.log('查询结果：', data)
    } else {
      speak(`I don't know exactly what is ${def}`)
    }
  } catch (err) {
    // 所有异常包括网络错误、JSON 解析错误都会被捕获
    console.debug('请求处理异常：', err)
  }
}

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