SWR（Stale-While-Revalidate）是一种缓存策略，允许你使用旧的（stale）缓存数据，同时后台异步地验证并更新这些缓存数据。这种策略在前端开发中特别有用，因为它可以减少等待时间，提高用户体验，同时确保数据的最新性。
在前端实现SWR机制，你通常会结合使用浏览器缓存（如localStorage、sessionStorage或IndexedDB）和HTTP请求（如fetch API）。以下是一个简单的JavaScript示例，展示了如何使用SWR机制从API获取数据：
// 假设你有一个API endpoint
const API_ENDPOINT = 'https://api.example.com/data';// 用于存储缓存数据的键
const CACHE_KEY = 'myData';// 获取缓存数据的函数
function getCachedData() {const cachedData = localStorage.getItem(CACHE_KEY);return cachedData ? JSON.parse(cachedData) : null;
}// 设置缓存数据的函数
function setCachedData(data) {localStorage.setItem(CACHE_KEY, JSON.stringify(data));
}// 发送HTTP请求获取数据的函数
async function fetchData() {const response = await fetch(API_ENDPOINT);const data = await response.json();return data;
}// 使用SWR机制获取数据的函数
async function getDataWithSWR() {// 尝试从缓存中获取数据let data = getCachedData();// 如果有缓存数据，先返回它，然后后台更新数据if (data) {try {const newData = await fetchData();setCachedData(newData); // 更新缓存数据console.log('数据已更新');} catch (error) {console.error('更新数据时出错', error);}return data; // 返回旧的（stale）数据}// 如果没有缓存数据，发送请求获取数据，并缓存它try {data = await fetchData();setCachedData(data); // 设置缓存数据} catch (error) {console.error('获取数据时出错', error);}return data; // 返回新获取的数据
}// 使用示例：获取数据并处理它
getDataWithSWR().then((data) => {console.log('获取到的数据：', data);// 在这里处理你的数据，如更新UI等。
});
这个示例展示了如何使用localStorage来缓存数据，并使用fetch API来从后端API获取数据。getDataWithSWR函数实现了SWR机制：它首先尝试从缓存中获取数据，如果有数据，则立即返回它，并在后台异步地更新这些数据。如果没有缓存数据，它会发送一个HTTP请求来获取数据，并将其缓存起来以供将来使用。
