使用 fetch 实现数据懒加载的核心做法是：在页面初始化时不发起请求，而是将获取数据的逻辑封装在一个函数中，并在用户触发特定动作（如点击按钮或滚动到底部）时再调用该函数。这样做可以确保只有在真正需要数据时才消耗网络资源，避免不必要的请求。
如何编写通用的懒加载数据获取函数
要实现这一功能，你需要定义一个异步函数，该函数内部包含 fetch 调用，并处理返回的响应。这个函数应当接受必要的参数（如 URL），并返回解析后的数据对象。通过这种方式，你可以将数据获取的逻辑与 UI 交互解耦。
async function loadData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch error:', error);
return null;
}
}上述代码定义了一个名为 loadData 的函数。它接收一个 url 参数，使用 await fetch(url) 发起请求。如果响应状态码不是 200-299 之间，它会抛出一个错误。成功时，它解析 JSON 并返回数据；失败时，记录错误并返回 null。这是懒加载的基础单元。
立即学习“Java免费学习笔记（深入）”；
如何在用户交互中触发数据加载
懒加载的关键在于“何时”调用上述函数。通常的做法是将函数绑定到用户的交互事件上，例如按钮的 click 事件。当用户点击按钮时，程序才会执行 loadData 函数，从而获取数据并更新界面。这种按需加载的方式显著提升了初始页面的加载速度。
<button id="loadBtn">加载数据</button>
<div id="result"></div>
<script>
const btn = document.getElementById('loadBtn');
const resultDiv = document.getElementById('result');
btn.addEventListener('click', async () => {
resultDiv.textContent = 'Loading...';
const data = await loadData('https://api.example.com/data');
if (data) {
resultDiv.textContent = JSON.stringify(data, null, 2);
} else {
resultDiv.textContent = 'Failed to load data.';
}
});
</script>这段 HTML 和 JavaScript 代码展示了一个完整的交互场景。用户点击 ID 为 loadBtn 的按钮后，监听器被触发。此时，resultDiv 显示“Loading...”，随后调用之前定义的 loadData 函数。获取到数据后，将其以 JSON 格式渲染到页面上；若失败，则显示错误信息。这实现了真正的按需加载。
如何处理加载过程中的状态反馈
在用户等待数据返回的过程中，提供视觉反馈是提升用户体验的重要环节。你可以在调用 fetch 之前设置一个加载状态（如显示 spinner 或文本），并在数据获取完成后清除该状态。此外，还需要考虑网络错误或超时情况，给用户明确的提示。
let isLoading = false;
btn.addEventListener('click', async () => {
if (isLoading) return; // 防止重复点击
isLoading = true;
resultDiv.textContent = 'Loading...';
try {
const data = await loadData('https://api.example.com/data');
if (data) {
resultDiv.innerHTML = '<pre class="brush:php;toolbar:false;">' + JSON.stringify(data, null, 2) + '';
} else {
resultDiv.textContent = 'Error: Failed to load data.';
}
} finally {
isLoading = false;
}
});此代码引入了 isLoading 标志位来防止用户在数据加载期间重复点击按钮，导致多个并发请求。在 try...finally 块中，无论请求成功还是失败，都会将 isLoading 重置为 false，确保按钮状态恢复正常。这种处理方式保证了应用的健壮性。
