为什么通过其索引 return 未定义访问 JavaScript 数组项

Question

我有一个 JavaScript 脚本，它通过获取 api 向 api 发出请求，然后将 json 响应推送到列表，我想通过它的索引访问列表中的响应对象，但项目 returns 未定义，就像它不在列表中一样。

我试过这个：

let trendingMoviesDetails = []
fetch(`https://api.themoviedb.org/3/movie/529203?api_key=${key}&language=en-US&append_to_response=videos,release_dates`)
.then(response => response.json())
.then(response => {trendingMoviesDetails.push(response)})
console.log(trendingMoviesDetails, trendingMoviesDetails[0])

但是为什么控制台打印出trendingMoviesDetails[0]为undefined。这是 chrome:

的结果

[]0: {adult: false, backdrop_path: '/fmIp40ev4VGquK2bMo52PQgaV2d.jpg', belongs_to_collection: {…}, budget: 65000000, genres: Array(5), …}length: 1[[Prototype]]: Array(0) 
undefined

Answer 1

这是因为fetch是异步的。您正在 then 处理程序中推送一些值 - 这意味着它将在 fetch 承诺得到解决后执行，同时尝试访问该处理程序之外的 [0] 值。

您可以将在上述承诺解析后必须调用的所有代码放入该处理程序中，或者像这样使用 async/await：

async function someFunc() {
 let trendingMoviesDetails = [];
 
 const response = await fetch(`https://api.themoviedb.org/3/movie/529203?api_key=${key}&language=en-US&append_to_response=videos,release_dates`);
 const json = await response.json();
 
 trendingMoviesDetails.push(json);
 console.log(trendingMoviesDetails, trendingMoviesDetails[0])
}

为什么通过其索引 return 未定义访问 JavaScript 数组项

Why does accesing a JavaScript array item through it's index return undefined

javascript

fetch-api