本教程详细介绍了如何使用 javascript 的 fetch api 从外部 api 获取数据，并将其高效地渲染到 html 表格中。文章首先讲解了 fetch api 的基础用法和正确解析 api 响应的关键，接着对比了传统 dom 操作与利用 `innerhtml` 和模板字面量进行优化的表格渲染方法，旨在帮助开发者构建性能更优的动态数据展示页面。
在现代 Web 开发中，从远程 API 获取数据并将其动态呈现在用户界面上是一项核心任务。JavaScript 的 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 的数组，其中每个元素代表一个商店。
立即学习“Java免费学习笔记（深入）”；
假设 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 样式。
<!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>
// JavaScript 代码将在这里
</script>
</body>
</html>JavaScript 代码（传统 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 属性结合 JavaScript 的模板字面量（Template Literals）。这种方法可以一次性构建所有 HTML 字符串，然后一次性将其插入到 DOM 中，大大减少了 DOM 操作的次数。
JavaScript 代码（优化后）：
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>
<img src="${item.logo_120x60}"
style="max-width:100px"
alt="${item.name_short}">
</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 样式在这方面起着关键作用。
总结
本教程详细介绍了如何使用 JavaScript 的 Fetch API 从外部 API 获取数据，并提供了两种将数据渲染到 HTML 表格中的方法。我们首先展示了传统的 DOM 操作方法，它虽然直观但可能在处理大量数据时效率低下。随后，我们引入了更优化的 innerHTML 结合模板字面量的方法，它通过减少 DOM 操作次数显著提升了渲染性能。在实际开发中，根据数据量和性能要求，选择合适的渲染策略至关重要。同时，不要忘记在代码中融入健壮的错误处理和良好的用户体验实践。
