使用Fetch API处理嵌套数据：解决‘undefined’错误并优化代码

本文详细讲解在使用javascript fetch api获取嵌套或关联数据时，如何避免因数据结构理解偏差导致的`undefined`错误。通过rick and morty api的实际案例，我们将探讨两种有效的数据整合方法：嵌套promise链和更现代、可读性更强的`async/await`模式，确保正确显示api返回的所有信息，并提供完整的代码示例。

在现代前端开发中，通过Fetch API从后端获取数据是常见的任务。然而，当数据模型之间存在关联性，需要从多个API端点或通过URL引用获取相关信息时，如果不正确处理，很容易遇到数据无法正确显示，例如出现undefined的情况。本教程将以一个具体的例子——从Rick and Morty API获取角色信息及其首次登场剧集名称——来演示如何解决这类问题。

理解数据结构：为什么会出现“undefined”？

问题的核心在于对API返回数据结构的误解。最初的代码尝试直接访问item.episode.name来获取剧集名称。然而，根据Rick and Morty API的文档，每个角色对象中的episode字段实际上是一个包含该角色出现过的所有剧集URL的数组，而不是一个直接包含剧集名称的对象。

例如，一个角色数据可能包含以下结构：

{  "id": 1,  "name": "Rick Sanchez",  // ... 其他属性  "episode": [    "https://rickandmortyapi.com/api/episode/1",    "https://rickandmortyapi.com/api/episode/2",    // ... 更多剧集URL  ],  // ...}

因此，直接使用item.episode.name会导致undefined，因为数组本身没有name属性。要获取特定剧集的名称，我们需要进一步发起请求，通过这些URL获取具体的剧集数据。对于“首次登场”的剧集，我们通常会选择数组中的第一个URL，即item.episode[0]。

解决方案一：使用Promise链进行嵌套数据获取

解决此问题的一种直接方法是在获取到角色数据后，对每个角色的第一个剧集URL发起新的Fetch请求。这可以通过Promise链（.then().then()）来实现。

JavaScript 代码示例 (index.js)

// 辅助函数：获取所有角色数据function getCharacters(callback) {    fetch("https://rickandmortyapi.com/api/character")        .then(response => {            if (!response.ok) {                throw new Error(`HTTP error! status: ${response.status}`);            }            return response.json();        })        .then(data => {            callback(data);        })        .catch(error => {            console.error("Error fetching characters:", error);        });}// 获取主内容区域的DOM元素const main = document.querySelector("main");// 获取角色数据并渲染getCharacters(data => {    data.results.forEach(character => {        // 检查是否有剧集URL，并获取第一个剧集URL        const firstEpisodeUrl = character.episode && character.episode.length > 0 ? character.episode[0] : null;        if (firstEpisodeUrl) {            // 对第一个剧集URL发起新的Fetch请求            fetch(firstEpisodeUrl)                .then(response => {                    if (!response.ok) {                        throw new Error(`HTTP error! status: ${response.status}`);                    }                    return response.json();                })                .then(episode => {                    // 成功获取剧集数据后，插入HTML                    main.insertAdjacentHTML('beforeend', `                                                                                    @@##@@                            
                                                                                                ${character.name}
                                    ${character.status} - ${character.species}                                
                                                                    Last known location:                                    ${character.location.name}                                
                                                                    First seen in:                                    ${episode.name}                                 
                            
                        
                    `);                })                .catch(error => {                    console.error(`Error fetching episode for ${character.name}:`, error);                    // 即使剧集获取失败，也渲染角色卡片，剧集名称显示为“未知”                    main.insertAdjacentHTML('beforeend', `                                                                                    @@##@@                            
                                                                                                ${character.name}
                                    ${character.status} - ${character.species}                                
                                                                    Last known location:                                    ${character.location.name}                                
                                                                    First seen in:                                    未知                                 
                            
                        
                    `);                });        } else {            // 如果没有剧集URL，直接渲染角色卡片，剧集名称显示为“未知”            main.insertAdjacentHTML('beforeend', `                                                            @@##@@                    
                                                                        ${character.name}
                            ${character.status} - ${character.species}                        
                                                    Last known location:                            ${character.location.name}                        
                                                    First seen in:                            未知                        
                    
                
            `);        }    });});// 注意：原代码中的 getLastKnowLocation 和 getEpisode 函数在此场景下不再直接用于渲染，// 因为位置信息直接在角色数据中，剧集信息通过嵌套请求获取。// 如果未来需要独立展示所有地点或剧集列表，这些函数仍然有用。

在这个解决方案中，我们首先获取所有角色数据。然后，对于每个角色，我们从其episode数组中取出第一个URL，并用它发起一个新的fetch请求来获取该剧集的详细信息。只有当剧集数据成功返回后，我们才能访问episode.name并将其插入到HTML中。

解决方案二：使用Async/Await提升代码可读性

Promise链虽然有效，但在处理多层嵌套或多个异步操作时，可能会导致“回调地狱”或代码结构变得复杂。ES2017引入的async/await语法提供了一种更简洁、更同步的异步代码编写方式，极大地提升了可读性。

JavaScript 代码示例 (index.js)

// 获取主内容区域的DOM元素const mainEl = document.querySelector("main");/** * 封装通用的JSON数据获取函数 * @param {string} url - 请求的URL * @returns {Promise

使用Fetch API处理嵌套数据：解决‘undefined’错误并优化代码

理解数据结构：为什么会出现“undefined”？

解决方案一：使用Promise链进行嵌套数据获取

JavaScript 代码示例 (index.js)

${character.name}

${character.name}

${character.name}

解决方案二：使用Async/Await提升代码可读性

JavaScript 代码示例 (index.js)

${character.name}

完整的HTML结构 (index.html)

Rick and Morty API

样式表 (style.css)

注意事项与最佳实践

总结

关于作者

相关推荐

发表回复