使用 document.addEventListener('DOMContentLoaded',

Question

我正在学习如何使用 API 创建一个简单的 CRUD Node Express Web 应用程序。

当我的 index.js 页面加载时，我有一个默认的 html 表，其中显示了在函数中填充的数据记录：

document.addEventListener('DOMContentLoaded', function () {
    
    fetch('http://localhost:3000/getQuestion/+ID)
    .then(response => response.json())
    .then(data => loadHTML(data['data']));
    
});

在这个函数中，我调用了一个 Get API 来返回数据，该数据使用存储在我的数据库中的记录填充表。

当我想用下一条记录更新此表时遇到问题。当我得到下一条记录时，我将我的 ID 加 1。 但是为了将新记录显示到表中，我还必须执行 location.reload() 以使用新数据刷新表中的内容；这反过来又清除了我的 ID 索引。

我的问题是：

1. 在 js 文件中显示我的 html 表格的表格数据的正确位置在哪里。放在里面有意义吗：document.addEventListener('DOMContentLoaded function ?

2. 如果是这样，那么每次此表数据更改时我都必须调用页面刷新。这是正确的吗？

3. 刷新页面会清除所有用于填充 API 参数的变量

我哪里错了。

Answer 1

1. 在 js 文件中显示我的 html 表格的表格数据的正确位置在哪里。放在里面有意义吗：document.addEventListener('DOMContentLoaded function ?

是和不是。 DOMContentLoaded 在库开发之外几乎不需要。相反，要使您的代码仅在页面被解析并构建 DOM 后运行，请执行以下操作之一：

1. 使用模块而不是脚本 (<script type="module" ...>)如果您的目标浏览器支持它；或
2. 在你的非模块script标签上使用defer；或
3. 将您的非模块 script 标签放在 HTML 的末尾，就在结束 </body> 标签之前

如果您执行任何这些操作，您的页面的 DOM 已准备好在您的代码运行时由您的代码操作，您可以直接执行 fetch 而不将其包装在事件中。使用模块还有一个好处是您的顶级变量不是全局变量，并且模块代码始终处于严格模式。

但是在 DOMContentLoaded 处理程序中这样做也很好。

1. 如果是这样，那么每次此表数据更改时我都必须调用页面刷新。这是正确的吗？

还有其他方法可以更改或添加到表数据。您尚未显示loadHTML，但您可以在table 或tbody 元素上使用appendChild，insertAdjacentHTML、insertAdjacentText 等。更多on MDN。

1. 刷新页面会清除所有用于填充 API 参数的变量

是的，刷新页面会完全重置全局环境和所有嵌套环境，因此页面上的所有内容都会刷新。

---

旁注：您显示的fetch 代码存在两个小问题：

1. 恐怕它会成为fetch API 脚枪的牺牲品。 fetch 仅在 network 错误时拒绝其承诺，而不是 HTTP 错误。因此 404、500 等不会拒绝承诺。您必须明确检查 HTTP 是否成功（这就是我总是使用包装函数的原因）。

2. 你没有处理错误。

解决这两个问题：

fetch('http://localhost:3000/getQuestion/+ID)
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.json();
})
.then(data => loadHTML(data['data']))
.catch(error => {
    // Handle/report error
});