JavaScript项目点击两次搜索按钮才显示OMDb电影信息问题求助

问题核心 #

问题出在异步操作的执行顺序错误。ApiModule.searchByTitle() 是向OMDb发送网络请求的异步操作，不会立刻返回数据，但你调用它之后马上就去获取电影信息、创建卡片，此时请求还未完成，ApiModule里的电影数据还是空的，所以第一次生成的卡片没有内容。第二次点击时，第一次的请求已经完成，数据被存入ApiModule，因此能正常显示。

解决方案 #

必须等异步请求完成后，再去获取数据并创建卡片，以下是两种可行的修改方式：

方式1：使用Async/Await（代码更清晰） #

修改 searchOnClick 为异步函数，等待请求完成后再执行后续逻辑：

async function searchOnClick(input) {
  // 等待异步请求完成
  await ApiModule.searchByTitle(input.value);
  
  const container = document.querySelector('.movie-list-container');
  const title = ApiModule.getMovieTitle();
  const year = ApiModule.getMovieYear();
  const rated = ApiModule.getMovieRated();
  const plot = ApiModule.getMoviePlot();
  const count = CountModule.getItemCount();
  
  container.appendChild(createItemCardTest(title, year, rated, plot, count));
  CountModule.addItem();
}

同时要确保 ApiModule.searchByTitle 返回Promise，示例实现如下：

// ApiModule内部的searchByTitle函数示例
async function searchByTitle(title) {
  const apiKey = '你的OMDb API密钥';
  const response = await fetch(`https://www.omdbapi.com/?t=${encodeURIComponent(title)}&apikey=${apiKey}`);
  const data = await response.json();
  
  // 将返回数据存入模块内部变量，供get方法读取
  this.movieData = data;
}

方式2：使用回调函数 #

如果不想用async/await，可以给 searchByTitle 添加回调参数，请求完成后再执行卡片创建逻辑：

// 修改ApiModule的searchByTitle，增加回调参数
function searchByTitle(title, callback) {
  const apiKey = '你的OMDb API密钥';
  fetch(`https://www.omdbapi.com/?t=${encodeURIComponent(title)}&apikey=${apiKey}`)
    .then(response => response.json())
    .then(data => {
      this.movieData = data;
      // 请求完成后触发回调
      callback();
    });
}

// 修改searchOnClick函数
function searchOnClick(input) {
  ApiModule.searchByTitle(input.value, () => {
    // 回调内获取数据并创建卡片
    const container = document.querySelector('.movie-list-container');
    const title = ApiModule.getMovieTitle();
    const year = ApiModule.getMovieYear();
    const rated = ApiModule.getMovieRated();
    const plot = ApiModule.getMoviePlot();
    const count = CountModule.getItemCount();
    
    container.appendChild(createItemCardTest(title, year, rated, plot, count));
    CountModule.addItem();
  });
}

关键提示 #

异步操作（如网络请求）不会阻塞代码执行，必须确保数据返回后再进行后续的DOM渲染操作，这是解决这类问题的核心。

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