如何从Promise中提取对象？我的OMDb API数据获取代码问题排查

问题根源 #

你的代码存在两个关键问题，导致最终拿到的是Promise数组而非实际电影数据：

1. getMovie函数里，data.json()是异步操作，你没有用await，所以返回的是未解析的Promise，不是电影详情对象。
2. 调用fetchedData.map(getMovie)时，因为getMovie是async函数，每个调用都会返回Promise，而map不会等待这些Promise完成，直接把所有Promise打包成数组返回了。

修复后的代码 #

JavaScript 代码

let fetchedData;
let dataToUse;
let moviesDivs;
const searchBtn = document.querySelector('.submitInput')
const movieName = document.querySelector('.searchInput')

searchBtn.addEventListener('click', async (e) => {
    e.preventDefault()
    const res = await fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&s=${movieName.value}`)
    const data = await res.json()
    
    fetchedData = data.Search
    // 用Promise.all等待所有异步请求完成
    dataToUse = await Promise.all(fetchedData.map(item => getMovie(item.imdbID)))
    console.log(dataToUse)
})

async function getMovie(imdbID){
    const data = await fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&i=${imdbID}`)
    // 给data.json()添加await，确保拿到解析后的JSON数据
    const response = await data.json()
    return response
}

HTML 代码

<div id='search-bar' class='centered'>
    <input class='searchInput' type="text" placeholder="Search for a movie">
    <input class='submitInput' type="submit" value="Search">
</div>

关键修复说明 #

• 修正getMovie函数：给data.json()加上await，确保函数返回的是实际的电影详情数据，而非未解析的Promise。
• 使用Promise.all：它会等待数组中所有Promise执行完成，返回包含所有结果的数组，这样dataToUse就会是你需要的电影详情集合。
• 事件回调改为async函数：允许在回调内使用await，替代嵌套的.then回调，让代码逻辑更清晰。

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