如何获取input输入值并在异步函数中调用API实现搜索功能

现有代码核心问题 #

• 变量作用域错误：moviesName 是keyup事件回调内的局部变量，search函数无法跨作用域读取该值，是请求无法正常触发的核心原因
• 逻辑断层：keyup事件触发后没有调用search函数，输入更新和搜索请求没有建立关联
• 拼写隐患：searchMOvies、showMovise存在大小写和拼写错误，容易触发变量未定义报错
• 性能问题：没有防抖处理，每按一次键就会发起一次请求，会造成无效请求过多，还容易触发API频率限制
• 兼容性问题：没有对搜索关键词做URL编码，输入包含空格、特殊符号时会导致请求URL格式错误

修复后可直接运行的代码 #

// 搜索关键词提升到外层作用域，可被search函数访问
let searchKeyword = ''
// 防抖定时器标识，用于清除待执行的搜索请求
let debounceTimer = null

// 注意检查你自己的input元素变量名，修正拼写错误
searchMovies.addEventListener('keyup', (event) => {
  searchKeyword = event.target.value.trim()
  // 每次输入都清空上一次的待执行搜索任务
  clearTimeout(debounceTimer)
  // 停止输入300ms后再发起搜索，延迟时长可自行调整
  debounceTimer = setTimeout(() => {
    // 搜索关键词为空时不发起请求，可按需新增空搜索提示逻辑
    if (searchKeyword) {
      search()
    }
  }, 300)
})

async function search() {
  try {
    // 用encodeURIComponent对搜索词编码，避免特殊字符导致URL错误
    const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=[REDCATED]&language=en-US&query=${encodeURIComponent(searchKeyword)}&page=1&include_adult=false`);
    if (response.status === 200) {
      const data = await response.json();
      console.log(data.results);
      // 修正渲染函数拼写错误
      showMovies(data.results);
    } else {
      console.log('请求错误状态码：', response.status);
      console.log('错误信息：', response.statusText);
    }
  } catch (err) {
    // 捕获网络异常、跨域等意外错误，避免代码直接中断
    console.error('搜索请求异常：', err)
  }
}

额外优化说明 #

• 如果不想在外层定义变量，也可以直接把搜索词作为参数传给search函数，作用域隔离性更好
• 可以额外加加载状态提示，用户输入后显示加载中，请求返回后再隐藏，提升交互体验
• 输入为空时可以选择回到默认推荐列表，不用保持之前的搜索结果

内容的提问来源于stack exchange，提问作者Omar Abd El-Latif