使用 fetch api 实现请求数据预渲染的核心做法是：在页面加载早期通过 fetch() 获取 json 数据，解析后直接操作 dom 将内容注入到占位容器中，从而在浏览器完成 html 解析和 css 渲染前展示关键信息。具体步骤包括创建容器、发起异步请求、处理响应并更新节点样式为可见。若请求失败或超时，应提供降级显示或错误提示，确保用户体验不受影响。
如何设置初始状态与容器结构
要实现预渲染，首先需要在 HTML 中预留一个空的容器元素，例如 ，并在 CSS 中将其设置为隐藏或半透明状态，避免闪烁。JavaScript 脚本应在 或页面顶部尽早执行，以便在浏览器绘制之前介入。初始化时，容器处于不可见状态，等待数据就绪后再切换为可见。
<meta charset="UTF-8"><title>Pre-render Demo</title><style>
#data-container {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.visible {
display: block !important;
}
</style><div id="data-container">
<h2>Loading Data...</h2>
<p>Content will appear here.</p>
</div>
<script src="app.js"></script>
上述代码定义了一个初始隐藏的容器。CSS 类 .visible 用于后续切换显示状态。HTML 结构简洁，仅包含占位文本，实际内容由 JS 动态替换。这种结构确保了即使 JS 加载延迟，用户也能看到明确的加载提示，而非空白页。
如何发起请求并更新 DOM
在 JavaScript 中，使用 fetch() 发起 GET 请求获取数据。请求成功后，解析 JSON 响应，并将数据插入到容器中。同时，移除容器的隐藏样式，使其立即显示。若请求失败，捕获异常并显示错误信息，保持容器可见但内容为错误提示。
// app.js
const container = document.getElementById('data-container');
async function preloadData() {
try {
const response = await fetch('/api/data.json');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// 更新容器内容
container.innerHTML = `
<h2>${data.title}</h2>
<p>${data.description}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="javascript-typescript-typescript-scaffold" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="overflowclass">javascript-typescript-typescript-scaffold</a>
<p class="overflowclass">你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型</p>
</div>
<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
`;
// 显示容器
container.classList.add('visible');
} catch (error) {
console.error('Preload failed:', error);
container.innerHTML = '<p>Failed to load data. Please try again later.</p>';
container.classList.add('visible');
}
}
preloadData();
该脚本定义了 preloadData 函数，使用 async/await 简化异步逻辑。请求 /api/data.json，若成功则更新 HTML 并添加 .visible 类。若失败，则显示错误消息并同样使容器可见。这确保了无论成功与否，用户都能看到反馈，避免无限加载状态。
基于请求超时条件的具体处理问题
在实际应用中，网络延迟可能导致请求长时间无响应，影响用户体验。因此，需要设置超时机制，当请求超过指定时间（如 5 秒）时，主动终止请求并显示超时提示。这可以通过 AbortController 实现，它允许在特定条件下取消未完成的 fetch 请求。
// 带超时的预加载
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
async function preloadWithTimeout() {
try {
const response = await fetch('/api/data.json', { signal: controller.signal });
clearTimeout(timeoutId); // 清除超时定时器
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
container.innerHTML = `
<h2>${data.title}</h2>
<p>${data.description}</p>
`;
container.classList.add('visible');
} catch (error) {
if (error.name === 'AbortError') {
container.innerHTML = '<p>Request timed out. Please refresh.</p>';
} else {
container.innerHTML = '<p>Failed to load data. Please try again later.</p>';
}
container.classList.add('visible');
}
}
preloadWithTimeout();
此代码引入了 AbortController 和 setTimeout。5 秒后若请求未完成，调用 controller.abort() 触发 AbortError。在 catch 块中区分超时和其他错误，分别显示不同提示。这提升了应用的健壮性，防止用户因网络问题而困惑。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
