fetch()调用API搜索无匹配时显示“无结果”提示的实现问题

你当前代码不生效有三个核心原因：

1. TVmaze 搜索接口在无匹配结果时，依然会返回 HTTP 200 状态码，响应内容是空数组[]，你的逻辑只判断了状态码200就进入数据处理流程，没有对空返回做判断，根本不会进入错误分支。
2. HTML中存放No result!的.error元素没有做显隐控制，无法和搜索结果联动。
3. 你在数据处理逻辑中直接取data[0]，如果返回空数组，data[0]为undefined，调用showContent会直接触发JS报错。

按以下步骤修改即可：

1. 新增CSS样式，默认隐藏错误提示，避免页面加载时就看到提示
2. 拿到接口返回的数组后，先判断数组长度，长度为0时直接走无结果逻辑
3. 每次发起新搜索前重置页面状态：隐藏错误提示、清空旧搜索结果，避免上一次搜索的内容残留
4. 错误处理分支中主动控制错误提示显示

新增CSS样式 #

.error {
  display: none; /* 默认隐藏无结果提示 */
  color: #f43f5e;
  margin: 0.5rem 0;
}

修改JS逻辑 #

// 提前获取需要操作的DOM元素
const searchForm = document.querySelector('form')
const searchInput = document.querySelector('input')
const errorTip = document.querySelector('.error')
// 替换成你自己的内容容器选择器
const contentContainer = document.querySelector('.content-container')

searchForm.addEventListener('submit', (e) => {
  // 阻止表单默认提交跳转行为
  e.preventDefault()
  const inputValue = searchInput.value.trim()

  // 每次搜索前重置状态
  errorTip.style.display = 'none'
  contentContainer.innerHTML = '' // 清空上一次的搜索结果

  const END_POINT = `https://api.tvmaze.com/search/shows?q=${inputValue}`
  fetch(END_POINT)
    .then(response => {
      // 用response.ok判断请求成功更通用，覆盖所有2xx状态码
      if (!response.ok) return Promise.reject(response)
      return response.json()
    })
    .then(data => {
      // 核心判断：返回空数组代表无匹配结果
      if (data.length === 0) throw new Error('No result!')

      // 有结果时正常渲染
      showContent(data[0])
      data.forEach(tvShow => displayContent(tvShow))
    })
    .catch(err => {
      console.log(err)
      // 展示无结果提示
      errorTip.style.display = 'block'
    })
})

• 如果你不想用throw error的方式，也可以直接在判断data.length === 0的分支里写显示错误提示的逻辑，不用走catch，效果一致
• 可以给输入值加非空判断，避免用户输入全空格发起无效请求
• 如果需要区分网络异常、接口报错、无结果三类场景，可以在catch里判断错误类型，分别展示不同提示

内容的提问来源于stack exchange，提问作者Hai Na Zheng