有没有办法访问流派元素

Question

我正在创建一个 Netflix 克隆，并使用 TMDB API 来获取数据，但我遇到了这个问题，当我尝试访问数据时，它显示未定义，但当我记录 JSON Promise 时，它显示如下：

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

这是代码：

let fetchDatas = [] // To store Json Data

const fetchData = async () => {
    let data = await fetch(`${baseURL}?api_key=${API_KEY}`); // baseURL = 'https://api.themoviedb.org/3/genre/movie/list' && API_KEY is private.

    if (data.status === 200) {
        return await data.json();
    }
}

fetchDatas = fetchData();
console.log(fetchDatas);

fetch(`${baseURL}?api_key=${API_KEY}`)
    .then(response => response.json())
    .then(data => {
        fetchDatas = data;
    })

console.log(fetchDatas);

每当我使用 API 时都会出现此问题。怎么解决这个问题？

我需要访问 Promise JSON 数据及其元素。即：

"fetchDatas['genres']

或

fetchDatas.genres

之类的东西或任何方式！”

这样我就可以将它应用到我的 Netflix 克隆中

Answer 1

您面临的问题是将异步代码视为同步代码的结果。这是一个错误。请查看下面的链接之一，了解有关 Promise 的更多信息（尤其是来自 web.dev 的链接）。

下面的代码，应该可以更好地演示它：

console.log('First code line')
let result = []

console.log('Before fetch')
fetch(`${baseURL}?api_key=${API_KEY}`)
    .then(response => {
      console.log('Got data, convert to object')
      response.json()
    }).then(data => {
        console('Got json data')
        result = data;
    })

console.log('Before result')
console.log(result);
console.log('Last code line')

您将看到“结果之前”和“最后一个代码行”在它甚至说“获取数据，转换为对象”之前被打印。当

fetch()

返回一个 Promise 时，代码将继续同步执行，而异步代码（Promise 处理程序

.then(...)

仅当新数据到达时（Promise 满足或拒绝）才会被触发。所以只要你不能这样做高级

await

，你必须处理

then/catch

语句。工作代码如下所示：

function handleGenre(data) {
  // do with the api response what ever you like, like updating the GUI.
  console.table(data)
}

fetch(`${baseURL}?api_key=${API_KEY}`)
    .then(res => res.json())
    .then(handleGenre)
    .catch(e => console.error(e))

更多关于承诺的信息：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://262.ecma-international.org/6.0/#sec-promise-objects
• https://web.dev/articles/introduction-to-fetch?hl=en
• https://web.dev/articles/async-functions?hl=en