使用Fetch API处理嵌套数据：解决‘undefined’错误并优化代码-js教程-PHP中文网

使用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', `
                        <article class="character-card">
                            <div class="image-container">
                                <img src="${character.image}" alt="Character">
                            </div>
                            <div class="character-info">
                                <div class="section">
                                    <h2>${character.name}</h2>
                                    <span class="status">${character.status} - ${character.species}</span>
                                </div>
                                <div class="section">
                                    <span class="greytext">Last known location:</span>
                                    <span>${character.location.name}</span>
                                </div>
                                <div class="section">
                                    <span class="greytext">First seen in:</span>
                                    <span>${episode.name}</span> <!-- 现在可以正确获取剧集名称 -->
                                </div>
                            </div>
                        </article>
                    `);
                })
                .catch(error => {
                    console.error(`Error fetching episode for ${character.name}:`, error);
                    // 即使剧集获取失败，也渲染角色卡片，剧集名称显示为“未知”
                    main.insertAdjacentHTML('beforeend', `
                        <article class="character-card">
                            <div class="image-container">
                                <img src="${character.image}" alt="Character">
                            </div>
                            <div class="character-info">
                                <div class="section">
                                    <h2>${character.name}</h2>
                                    <span class="status">${character.status} - ${character.species}</span>
                                </div>
                                <div class="section">
                                    <span class="greytext">Last known location:</span>
                                    <span>${character.location.name}</span>
                                </div>
                                <div class="section">
                                    <span class="greytext">First seen in:</span>
                                    <span>未知</span> 
                                </div>
                            </div>
                        </article>
                    `);
                });
        } else {
            // 如果没有剧集URL，直接渲染角色卡片，剧集名称显示为“未知”
            main.insertAdjacentHTML('beforeend', `
                <article class="character-card">
                    <div class="image-container">
                        <img src="${character.image}" alt="Character">
                    </div>
                    <div class="character-info">
                        <div class="section">
                            <h2>${character.name}</h2>
                            <span class="status">${character.status} - ${character.species}</span>
                        </div>
                        <div class="section">
                            <span class="greytext">Last known location:</span>
                            <span>${character.location.name}</span>
                        </div>
                        <div class="section">
                            <span class="greytext">First seen in:</span>
                            <span>未知</span>
                        </div>
                    </div>
                </article>
            `);
        }
    });
});

// 注意：原代码中的 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<Object|null>} - 返回解析后的JSON数据或在出错时返回null
 */
const fetchJsonAsync = async (url) => {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
    }
    return response.json();
  } catch (err) {
    console.error('Error fetching JSON:', url, err);
    return null; // 在错误发生时返回null，以便上层调用者可以优雅处理
  }
};

/**
 * 获取所有角色数据
 * @returns {Promise<Array>} - 返回角色数组
 */
const fetchAllCharacters = async () => {
  const response = await fetchJsonAsync('https://rickandmortyapi.com/api/character');
  return response ? response.results : []; // 如果获取失败，返回空数组
};

/**
 * 渲染单个角色HTML结构
 * @param {Object} character - 角色数据对象
 * @param {Object|null} episode - 剧集数据对象，可能为null
 * @returns {string} - 返回HTML字符串
 */
const renderCharacterHTML = (character, episode) => `
  <article class="character-card">
    <div class="image-container">
      <img src="${character.image}" alt="Character">
    </div>
    <div class="character-info">
      <div class="section">
        <h2>${character.name}</h2>
        <span class="status">${character.status} - ${character.species}</span>
      </div>
      <div class="section">
        <span class="greytext">Last known location:</span>
        <span>${character.location.name}</span>
      </div>
      <div class="section">
        <span class="greytext">First seen in:</span>
        <span>${episode ? episode.name : '未知'}</span> <!-- 优雅处理剧集数据可能缺失的情况 -->
      </div>
    </div>
  </article>
`;

/**
 * 主函数：协调数据获取和渲染
 */
const main = async () => {
  const characters = await fetchAllCharacters(); // 等待所有角色数据获取完成

  // 遍历每个角色，并异步获取其首次登场剧集信息
  for (let character of characters) {
    let episode = null;
    // 检查是否有剧集URL
    if (character.episode && character.episode.length > 0) {
        episode = await fetchJsonAsync(character.episode[0]); // 等待第一个剧集数据获取完成
    }

    // 渲染角色卡片
    mainEl.insertAdjacentHTML('beforeend', renderCharacterHTML(character, episode));
  }
};

// 调用主函数启动应用
main();

登录后复制

在这个async/await版本中：

我们创建了一个fetchJsonAsync辅助函数，用于统一处理fetch请求和JSON解析，并包含基本的错误处理。
fetchAllCharacters函数负责获取所有角色列表。
main函数被声明为async，允许我们在其中使用await。它首先await获取所有角色。
然后，它在一个for...of循环中遍历每个角色。在循环内部，对于每个角色，我们await获取其第一个剧集的详细信息。
所有数据准备就绪后，调用renderCharacterHTML函数生成HTML并插入到DOM中。这种方式使异步流程看起来更像是同步代码，大大提高了代码的可读性和维护性。

完整的HTML结构 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rick and Morty API</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Rick and Morty API</h1>
    <main></main>

    <script src="index.js"></script>
</body>
</html>

登录后复制

样式表 (style.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
    text-align: center;
    padding: 20px 0;
    font-size: 2.5em;
    color: #333;
}

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格布局 */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.character-card {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

.character-card:hover {
    transform: translateY(-5px);
}

.image-container {
    flex-shrink: 0; /* 防止图片缩小 */
}

.image-container img {
    width: 150px; /* 固定图片宽度 */
    height: 150px; /* 固定图片高度 */
    object-fit: cover; /* 确保图片覆盖容器 */
    display: block;
}

.character-info {
    display: flex;
    flex-direction: column;
    padding: 15px;
    flex-grow: 1; /* 允许信息区域占据剩余空间 */
}

.section {
    margin-bottom: 10px;
}

.section:last-child {
    margin-bottom: 0;
}

.section h2 {
    font-size: 1.5em;
    margin-bottom: 5px;
    color: #333;
}

.section span {
    font-size: 0.9em;
    color: #555;
}

.status {
    font-weight: bold;
    color: #007bff; /* 状态颜色 */
}

.greytext {
    color: rgb(158, 158, 158);
    font-size: 0.8em;
    margin-bottom: 3px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .character-card {
        flex-direction: column;
        align-items: center;
    }
    .image-container img {
        width: 100%;
        height: auto;
    }
    .character-info {
        text-align: center;
        width: 100%;
    }
}

登录后复制

注意事项与最佳实践

错误处理：在进行fetch请求时，务必添加.catch()或try...catch来捕获可能发生的网络错误或API返回的非2xx状态码。本教程的示例代码已包含基本的错误处理。
数据校验：在访问API返回的数据属性之前，最好进行空值或类型检查，例如character.episode && character.episode.length > 0，以避免在数据结构不符合预期时程序崩溃。
性能考量：
- N+1问题：如果需要为每个角色获取多个剧集信息，或者角色数量非常庞大，为每个角色单独发起一个嵌套请求可能会导致大量的网络请求，影响页面加载性能。在这种情况下，可以考虑使用Promise.all()并行发起多个请求，或优化API设计以减少请求次数（例如，在角色API响应中直接包含首次登场剧集名称）。
- 懒加载/虚拟列表：对于大量数据，可以考虑实现数据懒加载或虚拟列表，只渲染用户可见部分的数据，减少初始渲染压力。
用户体验：在异步数据加载过程中，提供加载指示器（如加载动画或骨架屏）可以提升用户体验，告知用户数据正在加载中。
API限流：注意所使用的API是否有请求频率限制。如果请求过于频繁，可能会被API服务器拒绝。

总结

通过本教程，我们深入探讨了在使用JavaScript Fetch API获取关联数据时可能遇到的undefined问题，并提供了两种健壮的解决方案：基于Promise链的嵌套请求和更现代、可读性更强的async/await模式。理解API数据结构、实施适当的错误处理和数据校验，以及考虑性能优化，是构建高效、稳定的前端应用的关键。选择哪种异步处理方式取决于项目需求和团队偏好，但async/await通常能带来更好的开发体验。

以上就是使用Fetch API处理嵌套数据：解决‘undefined’错误并优化代码的详细内容，更多请关注php中文网其它相关文章！