JavaScript 中怎么使用 stale-while-revalidate 缓存更新策略-js教程-PHP中文网

javascript 本身不直接实现 stale-while-revalidate（swr），需依赖浏览器对 cache-control 响应头（如 public, max-age=60, stale-while-revalidate=300）的自动支持，或在客户端用 cache api + fetch 模拟，亦可借助 swr、react query 等库实现。

javascript 中怎么使用 stale-while-revalidate 缓存更新策略

JavaScript 本身不直接实现 stale-while-revalidate（SWR），这是 HTTP 缓存控制机制，由浏览器在发起网络请求时根据响应头自动执行。但你可以在 JavaScript 应用中**配合服务端响应头**，或**在客户端模拟 SWR 行为**，实现类似效果——即：优先展示旧缓存数据，同时悄悄拉取新数据并更新。

服务端配合：设置正确的 Cache-Control 响应头

这是最标准、最轻量的方式。只要后端返回如下响应头，现代浏览器（Chrome 92+、Firefox 110+、Safari 16.4+）就会自动启用 SWR：

Cache-Control: public, max-age=60, stale-while-revalidate=300

含义是：

max-age=60：资源新鲜期 60 秒，期间直接读缓存，不发请求
stale-while-revalidate=300：过期后 5 分钟内，仍可立即返回旧缓存，同时后台静默发起 revalidation 请求

✅ 前提：API 接口需支持条件请求（如带 ETag 或 Last-Modified），且服务端正确处理 If-None-Match / If-Modified-Since，返回 304 Not Modified 或新内容。

客户端模拟 SWR：用 fetch + Cache API 手动管理

若服务端无法配置响应头（如调用第三方 API），可在 JS 中手动实现 SWR 逻辑：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

先尝试从 Cache API 读取（即使过期也读）
同时发起新的 fetch 请求
若缓存存在且未被清除，立即渲染；等新响应回来后更新状态和缓存

示例（简化版）：

async function swrFetch(url, cacheName = 'swr-cache') {
  const cache = await caches.open(cacheName);
  let cached = await cache.match(url);
<p>// 立即返回缓存数据（即使 stale）
let data = null;
if (cached) {
data = await cached.json();
}</p><p>// 后台静默更新
fetch(url)
.then(res => res.json())
.then(newData => {
// 更新缓存
cache.put(url, new Response(JSON.stringify(newData)));
// 触发 UI 更新（例如通过 setState 或事件）
updateUI(newData);
})
.catch(() => { /<em> 忽略网络失败，保留旧数据 </em>/ });</p><p>return data;
}</p>

使用成熟库（推荐）：SWR 或 React Query

在 React 生态中，SWR 是专为 SWR 场景设计的 Hooks 库，开箱即用：

import useSWR from 'swr';
<p>function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher);</p><p>if (isLoading) return </p><div>Loading...</div>;
if (error) return <div>Failed to load</div>;
return <div>Hello {data.name}!</div>;
}

它默认行为就是 SWR：显示旧数据 → 后台重新请求 → 成功后自动更新 UI 和缓存。还支持错误重试、依赖请求、乐观更新等。

其他框架也有对应方案：Vue 用 TanStack Query，纯 JS 可封装基于 Promise 的 SWR 工具函数。