切换为keyup事件调用OMDB API时出现forEach未定义错误求助

问题描述 #

我在尝试从OMDB数据库获取电影数据展示时，用click事件调用一切正常，但切换成keyup事件后，控制台抛出了如下错误：

Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
at fetchMovie.getMovies.then.res (main.js:27)
fetchMovie.getMovies.then.res @ main.js:27
async function (async)
searchInput.addEventListener @ main.js:19

原代码 #

let searchInput = document.getElementById('search')
class fetchData {
 constructor() {
 this.apiKey = 'here is APIKey'
 }
 async getMovies(movie) {
 const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
 const moveData = await movieRes.json()
 return { moveData }
 }
}
const fetchMovie = new fetchData
searchInput.addEventListener('keyup', (e) => {
 let input = e.target.value
 if (input !== '') {
 fetchMovie.getMovies(input)
 .then(res => {
 let data = res.moveData.Search
 let output = ''
 data.forEach(movie => {
 output += `
 <div class="col-md-3">
 <div class="card" style="width: 18rem;">
 <img class="card-img-top" src="${movie.Poster}" alt="Card image cap">
 <div class="card-body">
 <h5 class="card-title">${movie.Title}</h5>
 <p class="card-text">${movie.Year}</p>
 <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 </div>
 </div>`
 });
 document.getElementById('container').innerHTML = output;
 })
 }
 e.preventDefault();
})

错误原因分析 #

这个错误的核心是当输入的关键词没有匹配到电影时，OMDB API返回的响应里没有Search字段，导致res.moveData.Search变成undefined，这时调用forEach就会报错。而keyup事件会随着用户输入实时触发，很容易出现输入无匹配内容的情况，这就是为什么click事件没问题（一般用户会输入有效关键词再点击），但keyup就报错的原因。

修复后的代码 #

我已经修复了这个错误，同时还处理了海报图片为N/A的情况，现在keyup事件正常工作，控制台也没有报错了：

let searchInput = document.getElementById('search');
class fetchData {
 constructor() {
 this.apiKey = '884df292'
 }
 async getMovies(movie) {
 const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
 const moveData = await movieRes.json()
 return { moveData }
 }
}
const fetchMovie = new fetchData
searchInput.addEventListener('keyup', (e) => {
 let input = e.target.value;
 if (input !== '') {
 fetchMovie.getMovies(input)
 .then(res => {
 let data = res.moveData.Search
 console.log(data)
 if (!data) {
 return false
 } else {
 let output = ''
 data.forEach(movie => {
 let poster
 if (movie.Poster === "N/A") {
 poster = `https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg`
 } else {
 poster = movie.Poster
 }
 output += `
 <div class="col-md-3 movie-card">
 <div class="card">
 <img class="card-img-top" src="${poster}" alt="Card image cap">
 <div class="card-body">
 <h5 class="card-title">${movie.Title}</h5>
 <p class="card-text">${movie.Year}</p>
 <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 </div>
 </div>`
 });
 document.getElementById('container').innerHTML = output;
 }
 })
 .catch(err => console.log(err))
 }
 e.preventDefault();
})

修复要点 #

1. 增加了Search字段的存在性检查：在调用forEach前先判断data是否存在，如果不存在就直接返回，避免报错。
2. 处理了空海报的情况：当电影海报为N/A时，替换成默认的无图片占位图，提升页面展示效果。
3. 添加了.catch捕获Promise错误：可以更好地排查后续可能出现的请求问题。

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