使用 fetch api 实现请求数据预异步策略，核心做法是在页面渲染或用户交互触发前，利用 promise 提前发起网络请求并将结果缓存到内存中。当后续业务逻辑真正需要该数据时，直接读取缓存值而非再次等待网络响应，从而消除首屏或关键路径的加载延迟。具体实现通常涉及在应用初始化阶段调用 fetch() 并存储返回的 json 对象，确保在依赖该数据的组件或函数执行前，数据已就绪。
如何在应用启动时预取关键配置数据
在应用启动阶段预取关键配置数据，可以通过在入口文件（如 index.js）中同步发起 fetch 请求来实现。开发者只需在 main 函数或模块顶层 await 获取数据，将其存入全局状态或闭包变量中，即可保证后续代码访问时无需等待网络。这种做法适用于对首屏体验要求极高且数据量较小的场景，如主题配置、用户基础信息等。
const configData = {};
async function preloadConfig() {
try {
const response = await fetch('/api/config');
if (!response.ok) throw new Error('Network error');
configData.theme = await response.json();
console.log('Config preloaded:', configData.theme);
} catch (error) {
console.error('Preload failed:', error.message);
}
}
preloadConfig().then(() => {
// 模拟后续业务逻辑
console.log('App started with theme:', configData.theme);
});
上述代码展示了在应用启动时预取配置数据的完整流程。首先定义一个空对象 configData 用于存储结果。接着定义 preloadConfig 函数，使用 await fetch('/api/config') 发起请求。如果请求成功，解析 JSON 并存入对象；如果失败，捕获错误并打印日志。最后调用该函数，并在 Promise 解决后执行后续业务逻辑。预期结果是控制台先输出 'Config preloaded'，随后输出 'App started'，证明数据已在业务逻辑执行前就绪。
如何为动态路由页面预取列表数据
为动态路由页面预取列表数据，可以在用户导航触发前，根据路由参数提前发起请求。例如，在点击链接时立即通过 fetch() 获取目标页面的数据列表，并将其缓存在基于 URL 的 Map 结构中。当路由切换完成时，直接从缓存中读取数据渲染页面，避免在路由切换过程中出现空白或加载动画。这种方法特别适用于内容型网站或后台管理系统，其中列表数据加载耗时较长。
const cache = new Map();
async function prefetchList(url) {
if (cache.has(url)) return cache.get(url);
try {
const response = await fetch(url);
const data = await response.json();
cache.set(url, data);
console.log('Prefetched list for', url);
return data;
} catch (error) {
console.error('Prefetch failed for', url, error.message);
return null;
}
}
// 模拟用户点击链接
prefetchList('/api/posts?page=1').then(data => {
console.log('Rendering posts:', data ? data.length : 0);
});
这段代码演示了为动态路由预取列表数据的策略。使用 Map 对象 cache 来存储不同 URL 对应的数据，防止重复请求。prefetchList 函数首先检查缓存，若存在则直接返回；否则发起 fetch 请求，解析 JSON 后存入缓存并返回。在实际使用中，可以在用户鼠标悬停或点击链接的瞬间调用此函数。预期结果是当用户真正进入页面时，数据已经存在于 cache 中，渲染过程几乎无延迟。若请求失败，函数返回 null 并记录错误，保证程序不会崩溃。
预取策略中如何处理并发请求导致的内存溢出
在预取策略中处理并发请求导致的内存溢出，关键在于限制同时进行的请求数量并对缓存进行过期管理。可以通过实现一个简单的信号量或队列机制，控制同一时间只有固定数量的 fetch 请求在运行。同时，为缓存中的每条数据设置 TTL（生存时间），定期清理不再使用的条目。这样既能保持预取带来的性能优势，又能防止内存占用无限增长。具体做法是结合 Promise.allSettled 和定时任务来实现。
const activeRequests = new Set();
const maxConcurrent = 3;
const cache = new Map();
function enqueueRequest(url, fetchFn) {
return new Promise((resolve, reject) => {
const checkQueue = () => {
if (activeRequests.size {
activeRequests.delete(url);
checkQueue();
});
} else {
setTimeout(checkQueue, 100);
}
};
checkQueue();
});
}
// 使用示例
enqueueRequest('/api/data1', async (url) => {
const res = await fetch(url);
return res.json();
}).then(data => console.log('Data 1 loaded'));
该代码实现了一个简单的并发控制器。使用 Set activeRequests 跟踪当前正在进行的请求，maxConcurrent 设定最大并发数为 3。enqueueRequest 函数将请求加入队列，如果当前活跃请求数未达到上限，则立即执行；否则每隔 100 毫秒检查一次队列。请求完成后从集合中移除，并触发下一个等待的请求。这种机制有效避免了因大量预取请求同时发起而导致的浏览器资源耗尽问题。预期结果是无论提交多少预取任务，同时运行的请求数始终不超过设定值，系统保持稳定。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
