Netflix克隆项目中如何访问TMDB API返回的genres数据？

核心原因 #

你遇到的问题是异步操作的执行顺序导致的：

• fetch 和 async/await 都是异步操作，代码不会等待它们完成就继续执行后面的console.log，所以此时fetchDatas还没被赋值为返回的JSON数据。
• 直接把async函数的返回值（Promise对象）赋值给fetchDatas，自然无法通过fetchDatas.genres访问数据。

方案1：用async/await的正确写法 #

把调用逻辑放在async函数里，确保等待数据返回后再操作：

let fetchDatas = [];
const baseURL = 'https://api.themoviedb.org/3/genre/movie/list';
// 替换成你的API_KEY
const API_KEY = 'your_api_key_here';

const fetchData = async () => {
    const response = await fetch(`${baseURL}?api_key=${API_KEY}`);
    if (response.status === 200) {
        return await response.json();
    }
    throw new Error('请求失败');
};

// 用async函数包裹调用逻辑
const init = async () => {
    fetchDatas = await fetchData();
    // 现在可以正常访问数据了
    console.log(fetchDatas.genres);
    // 这里可以把数据用到你的Netflix克隆项目中，比如渲染分类列表
};

// 初始化调用
init();

方案2：用.then链式调用的正确写法 #

确保所有需要使用数据的逻辑都放在then回调内部：

let fetchDatas = [];
const baseURL = 'https://api.themoviedb.org/3/genre/movie/list';
const API_KEY = 'your_api_key_here';

fetch(`${baseURL}?api_key=${API_KEY}`)
    .then(response => {
        if (response.status === 200) {
            return response.json();
        }
        throw new Error('请求失败');
    })
    .then(data => {
        fetchDatas = data;
        // 在这里处理数据，比如访问genres
        console.log(fetchDatas.genres);
        // 执行你的项目渲染逻辑
    })
    .catch(error => {
        console.error('获取数据出错:', error);
    });

// 不要在then外面直接console.log，因为此时数据还没返回

关键注意点 #

• 永远不要在异步操作外部直接访问异步返回的数据，必须等待异步操作完成后再处理。
• 可以用try/catch（对应async/await）或.catch（对应链式调用）捕获请求错误，避免项目崩溃。
• 你的代码里重复调用了两次API，建议只保留一种写法，减少不必要的请求。

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