在进行网络请求时，设置合理的缓存策略能够有效提升应用的性能和用户体验。使用 Fetch API 可以通过多种方式来实现这一点。本章将详细介绍如何利用 Fetch API 设置缓存策略。
缓存的基础概念
在讨论如何使用 Fetch API 设置缓存策略之前，我们首先需要了解一些关于缓存的基础知识。
什么是缓存？
缓存是一种临时存储数据的技术，目的是为了加快数据访问速度。当用户首次请求某些资源时，这些资源会被下载到本地缓存中。之后，当再次请求相同资源时，浏览器会优先从本地缓存中读取数据，而不是重新发起网络请求。这大大减少了网络延迟，提高了加载速度。
缓存的优势
- 提高性能：减少网络请求可以显著缩短页面加载时间。
- 节约带宽：重复访问相同的资源时无需消耗额外的数据流量。
- 改善用户体验：快速响应用户操作能提升用户的满意度。
使用 Cache Storage API 管理缓存
除了浏览器内置的 HTTP 缓存机制外，Fetch API 还提供了 Cache 对象，允许开发者更灵活地控制缓存策略。
创建和更新缓存
要使用 Cache 对象，首先需要调用 caches.open() 方法打开或创建一个新的缓存实例。然后可以通过 put() 方法将请求和响应对添加到缓存中。
// 打开或创建名为 'v1' 的缓存
caches.open('v1').then(cache => {
// 发起请求并获取响应
fetch('https://example.com/data.json').then(response => {
// 将请求和响应对保存到缓存中
cache.put('https://example.com/data.json', response.clone());
});
});获取缓存中的数据
要从缓存中检索数据，可以使用 match() 或 matchAll() 方法。这两个方法接受一个请求或者请求的 URL，并返回匹配到的第一个响应或所有匹配的响应。
// javascriptcn.com 代码示例
caches.open('v1').then(cache => {
cache.match('https://example.com/data.json').then(response => {
if (response) {
response.text().then(text => console.log(text));
} else {
console.log('未找到匹配项');
}
});
});删除缓存中的数据
若需要删除缓存中的特定条目，可以使用 delete() 方法。
caches.open('v1').then(cache => {
cache.delete('https://example.com/data.json');
});清空整个缓存
如果想要清空某个命名缓存的所有内容，可以使用 keys() 方法获取该缓存的所有键，然后遍历这些键并逐个删除它们。
// javascriptcn.com 代码示例
caches.keys().then(names => {
names.forEach(name => {
caches.open(name).then(cache => {
cache.keys().then(requests => {
requests.forEach(request => {
cache.delete(request);
});
});
});
});
});控制HTTP缓存策略
虽然 Cache API 提供了强大的缓存管理功能，但许多情况下，我们仍需依赖于浏览器内置的 HTTP 缓存机制来处理静态资源的缓存。
使用 Cache-Control 头
服务器可以通过设置 Cache-Control HTTP 响应头来指定资源的缓存策略。常见的值包括：
public: 允许任何中间代理缓存该资源。private: 只允许客户端缓存该资源，不允许任何中间代理缓存。no-cache: 在使用缓存之前必须先向服务器验证资源是否过期。no-store: 不允许任何缓存存储此资源。max-age=<seconds>: 指定资源的有效期，在这个时间段内，浏览器可以直接使用缓存。
例如，服务器可以发送以下响应头来确保资源不会被缓存：
Cache-Control: no-store
利用 Last-Modified 和 ETag
除了 Cache-Control，还可以通过 Last-Modified 和 ETag 头进一步细化缓存策略。当客户端请求资源时，可以附带 If-Modified-Since 或 If-None-Match 请求头，服务器根据这些信息判断资源是否已经修改。如果没有变化，则返回 304 Not Modified 响应，避免传输相同的内容。
// 客户端请求 If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT // 服务器响应 HTTP/1.1 304 Not Modified
结合 Fetch API 和 Service Worker 实现离线支持
Service Worker 是一种可编程网络代理，可用于拦截和处理网络请求，非常适合用于实现复杂的缓存策略和提供离线支持。
注册 Service Worker
首先需要在主页面注册 Service Worker。
// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('ServiceWorker 注册成功:', registration.scope);
}).catch(error => {
console.error('ServiceWorker 注册失败:', error);
});
});
}编写 Service Worker 脚本
在 service-worker.js 文件中，我们可以定义缓存策略。
// javascriptcn.com 代码示例
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache-v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/app.js'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});以上代码中，当 Service Worker 安装时，它会预先缓存指定的资源。对于后续的任何请求，都会尝试从缓存中查找资源；如果找不到，则发起新的网络请求。
通过上述方法，我们可以有效地利用 Fetch API 和相关技术来实现高效且灵活的缓存策略，从而优化前端应用的性能。