J*aScript Fetch API：从数据获取到表格渲染的优化实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript Fetch API：从数据获取到表格渲染的优化实践

2025-10-18

浏览次数：次

返回列表

JavaScript Fetch API：从数据获取到表格渲染的优化实践

本教程详细介绍了如何使用 j*ascript 的 fetch api 从外部 api 获取数据，并将其高效地渲染到 html 表格中。文章首先讲解了 fetch api 的基础用法和正确解析 api 响应的关键，接着对比了传统 dom 操作与利用 `innerhtml` 和模板字面量进行优化的表格渲染方法，旨在帮助开发者构建性能更优的动态数据展示页面。

在现代 Web 开发中，从远程 API 获取数据并将其动态呈现在用户界面上是一项核心任务。J*aScript 的 Fetch API 提供了一种强大且灵活的方式来执行网络请求。本文将深入探讨如何利用 Fetch API 获取数据，并重点介绍两种将数据渲染到 HTML 表格中的方法：传统的 DOM 操作和更高效的 innerHTML 结合模板字面量的方法。

1. 理解 Fetch API 基础

Fetch API 提供了一个通用的接口，用于发出网络请求。它返回一个 Promise，使得处理异步操作变得更加简洁。

基本用法：

fetch('your-api-endpoint')
  .then(response => {
    // 检查响应是否成功 (HTTP 状态码 200-299)
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    // 解析 JSON 响应体
    return response.json();
  })
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 捕获请求或数据解析过程中的任何错误
    console.error('获取数据时发生错误:', error);
  });

fetch() 函数接收一个 URL 作为参数，并返回一个 Promise。
.then() 方法用于处理 Promise 成功时的结果。第一个 .then() 通常用于检查响应状态并将其解析为 JSON（或其他格式，如 response.text()）。
第二个 .then() 接收解析后的数据，并在这里进行业务逻辑处理。
.catch() 方法用于捕获在 Promise 链中发生的任何错误。

2. 解析 API 响应数据

成功获取 API 响应后，关键在于正确解析其数据结构。不同的 API 会返回不同格式的数据。在本示例中，API 返回的数据结构包含一个名为 webshops 的数组，其中每个元素代表一个商店。

假设 API 响应的 JSON 结构大致如下：

{
  "webshops": [
    {
      "name_short": "商店A",
      "link": "https://link-to-store-a.com",
      "orig_url": "原始URL-A",
      "logo_120x60": "https://logo-a.png"
    },
    {
      "name_short": "商店B",
      "link": "https://link-to-store-b.com",
      "orig_url": "原始URL-B",
      "logo_120x60": "https://logo-b.png"
    }
    // ... 更多商店
  ]
}

为了获取 webshops 数组，我们可以使用对象解构赋值，或者直接通过 data.webshops 访问。

.then(data => {
  const webshops = data.webshops; // 或者使用解构赋值 .then(({ webshops }) => { ... });
  // ... 处理 webshops 数组
})

3. 传统 DOM 操作填充表格

在理解了如何获取和解析数据后，我们可以开始将这些数据动态地渲染到 HTML 表格中。一种常见的方法是使用 document.createElement()、appendChild() 等 DOM API 来逐个创建和插入元素。

HTML 结构和 CSS 样式：

首先，我们需要一个基本的 HTML 表格结构和一些 CSS 样式。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

<!DOCTYPE html>
<html>
<head>
  <title>API 数据表格</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="api-table">
    <thead>
      <tr>
        <th>名称</th>
        <th>URL</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据将动态插入到这里 -->
    </tbody>
  </table>

  <script>
    // J*aScript 代码将在这里
  </script>
</body>
</html>

J*aScript 代码（传统 DOM 操作）：

    fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP 错误！状态码: ${response.status}`);
        }
        return response.json();
      })
      .then(({ webshops }) => { // 使用解构赋值直接获取 webshops 数组
        const tableBody = document.querySelector('#api-table tbody');

        webshops.forEach(item => {
          const row = document.createElement('tr'); // 创建行

          // 创建名称单元格
          const nameCell = document.createElement('td');
          nameCell.textContent = item.name_short; // 使用正确的字段名
          row.appendChild(nameCell);

          // 创建 URL 单元格
          const urlCell = document.createElement('td');
          const urlLink = document.createElement('a');
          urlLink.href = item.link; // 使用正确的字段名
          urlLink.textContent = item.orig_url; // 使用正确的字段名
          urlCell.appendChild(urlLink);
          row.appendChild(urlCell);

          // 创建 Logo 单元格
          const logoCell = document.createElement('td');
          const logoImg = document.createElement('img');
          logoImg.src = item.logo_120x60; // 使用正确的字段名
          logoImg.alt = item.name_short;
          logoImg.style.maxWidth = '100px'; 
          logoCell.appendChild(logoImg);
          row.appendChild(logoCell);

          tableBody.appendChild(row); // 将行添加到表格体
        });
      })
      .catch(error => console.error('获取或渲染数据时发生错误:', error));

这种方法的优点是逻辑清晰，易于理解，尤其适用于少量元素的动态添加。然而，当需要添加大量元素时，频繁的 DOM 操作（每次 createElement 和 appendChild 都会触发浏览器重绘和回流）可能会导致性能问题，影响用户体验。

4. 优化表格渲染：使用 innerHTML 和模板字面量

为了提高性能，尤其是当需要渲染大量数据时，推荐使用 innerHTML 属性结合 J*aScript 的模板字面量（Template Literals）。这种方法可以一次性构建所有 HTML 字符串，然后一次性将其插入到 DOM 中，大大减少了 DOM 操作的次数。

J*aScript 代码（优化后）：

    fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP 错误！状态码: ${response.status}`);
        }
        return response.json();
      })
      .then(({ webshops }) => {
        // 使用 map 方法将每个数据项转换为一个 HTML 表格行字符串
        const tableRowsHtml = webshops.map(item => `
          <tr>
            <td>${item.name_short}</td>
            <td><a href="${item.link}">${item.orig_url}</a></td>
            <td>
              @@##@@
            </td>
          </tr>
        `).join(''); // 将所有行字符串连接成一个大字符串

        // 一次性将生成的 HTML 字符串插入到 tbody 中
        document.querySelector('#api-table tbody').innerHTML = tableRowsHtml;
      })
      .catch(error => console.error('获取或渲染数据时发生错误:', error));

方法解析：

webshops.map(...): map() 方法遍历 webshops 数组中的每个 item。
模板字面量（`...`）: 使用反引号定义字符串，允许内嵌表达式 ${expression}。这使得构建复杂的 HTML 字符串变得非常直观和简洁。
.join(''): map() 方法返回一个字符串数组，.join('') 将这些字符串连接成一个单一的、完整的 HTML 字符串。
innerHTML = ...: 最后，将这个巨大的 HTML 字符串赋值给 tbody 元素的 innerHTML 属性。浏览器会一次性解析并渲染这段 HTML，而不是逐个元素地进行 DOM 操作。

这种优化方法显著减少了与 DOM 交互的次数，从而提高了渲染性能，尤其是在处理大量数据时效果更为明显。

5. 注意事项与最佳实践

错误处理： 始终包含 .catch() 来处理网络请求失败或数据解析错误。这对于提供健壮的用户体验至关重要。
数据结构验证： 在处理 API 响应数据之前，最好进行数据结构验证，以确保所需字段存在且类型正确，避免因 API 变更或意外响应导致运行时错误。
加载状态反馈： 对于用户来说，网络请求可能需要时间。在数据加载期间显示一个加载指示器（如“加载中...”文本或旋转图标）可以提升用户体验。
安全性 (XSS)： 当使用 innerHTML 插入来自不可信源的数据时，存在跨站脚本 (XSS) 攻击的风险。在本教程的示例中，API 数据被认为是可信的。但在实际应用中，如果数据来自用户输入或其他不可信源，应在插入 DOM 之前对其进行适当的净化（sanitization）。
响应式设计： 确保你的表格和其中的内容在不同设备和屏幕尺寸上都能良好显示。CSS 样式在这方面起着关键作用。

总结

本教程详细介绍了如何使用 J*aScript 的 Fetch API 从外部 API 获取数据，并提供了两种将数据渲染到 HTML 表格中的方法。我们首先展示了传统的 DOM 操作方法，它虽然直观但可能在处理大量数据时效率低下。随后，我们引入了更优化的 innerHTML 结合模板字面量的方法，它通过减少 DOM 操作次数显著提升了渲染性能。在实际开发中，根据数据量和性能要求，选择合适的渲染策略至关重要。同时，不要忘记在代码中融入健壮的错误处理和良好的用户体验实践。