SvelteKit同一页面两次调用preloadData失效问题咨询

以下是几种可行的解决方案，针对你遇到的preloadData同时调用失效的问题：

1. 检查并利用预加载方法的唯一标识参数 #

部分预加载方法内部会用请求URL作为缓存键，但如果存在上下文覆盖逻辑，同时调用时会导致后执行的请求覆盖前一个的缓存。你可以尝试给preloadData传入额外的标识参数（如果方法支持），确保每个页面的预加载数据有独立的存储键：

// 假设方法支持自定义缓存键
preloadData('/page1', { cacheKey: 'page1_data' });
preloadData('/page2', { cacheKey: 'page2_data' });

如果官方文档没提及这个参数，可以查看方法的源码或类型定义，确认是否有隐藏的配置项支持多页面缓存区分。

2. 手动封装缓存层管理多页面预加载数据 #

如果preloadData本身不支持多页面并行预加载，你可以自己封装一层缓存逻辑，避免重复请求并确保数据独立存储：

const pageDataCache = new Map();

async function safePreload(url) {
  if (pageDataCache.has(url)) {
    return pageDataCache.get(url);
  }
  const data = await preloadData(url);
  pageDataCache.set(url, data);
  return data;
}

// 并行预加载两个页面
await Promise.all([safePreload('/page1'), safePreload('/page2')]);

之后路由跳转时，先从pageDataCache中读取对应URL的数据，只有缓存不存在时才调用preloadData。

3. 并行执行预加载并手动绑定路由缓存 #

如果preloadData的缓存是和路由实例绑定的，同时调用可能会导致缓存上下文混乱。你可以用Promise.all并行执行请求，然后将结果手动存入路由对应的缓存位置：

Promise.all([
  preloadData('/page1').then(res => ({ path: '/page1', data: res })),
  preloadData('/page2').then(res => ({ path: '/page2', data: res }))
]).then(results => {
  results.forEach(item => {
    // 根据你使用的路由库，将数据存入对应路由的预加载缓存
    // 例如在Vue Router中，可以通过路由元信息存储：
    const route = router.options.routes.find(r => r.path === item.path);
    if (route) route.meta.preloadedData = item.data;
  });
});

跳转路由时，直接读取对应路由元信息中的预加载数据即可。

4. 排查预加载方法的内部冲突逻辑 #

如果以上方法都无效，可能是preloadData内部存在状态互斥的逻辑（比如同一时间只允许一个预加载请求）。你可以尝试串行执行两个预加载请求，看是否能正常缓存：

await preloadData('/page1');
await preloadData('/page2');

如果串行执行有效，说明方法内部存在并发限制，此时可以考虑向官方提交issue，或者改用串行预加载的方式（虽然会增加预加载耗时，但能保证数据缓存生效）。

内容的提问来源于stack exchange，提问作者Daniel F. Smith