const { create: createAxios } = require('axios').default;
const { setupCache } = require('axios-cache-interceptor');
const { log } = console;//
// Complete documentation at:
// https://axios-cache-interceptor.js.org/
//(async () => {const axios = setupCache(// creating axios instancecreateAxios({ baseURL: 'https://registry.npmjs.org/' }),// configuring the cache{ ttl: 99999, interpretHeader: true });const fetchedResponse = await axios.get('/axios-cache-interceptor');// fetchedResponse.cached == false//// The next request won't do a network request, because the response is already cached//const cachedResponse = await axios.get('/axios-cache-interceptor');// cachedResponse.cached == truelog(`First request was ${fetchedResponse.cached ? 'cached' : 'fetched'}`);log(`Second request was ${cachedResponse.cached ? 'cached' : 'fetched'}`);//// The interpretHeader option used a different strategy, see the received Cache-Control header// (server may return undefined if this is the first request in a while :))//log(`Fetched response Cache-Control: ${fetchedResponse.headers['cache-control']}`);log(`Fetched response Age: ${fetchedResponse.headers.age}`);const cacheInformation = await axios.storage.get(fetchedResponse.id);//// As you can see, the TTL used was the maxAge cache directive minus the Age header//log(`Cache TTL info: ${cacheInformation.ttl}`);//// If you disable the interpretHeader option you'll see that the TTL will be the default (99999)\n//// Remove the old cache by brute forceawait axios.storage.remove(fetchedResponse.id);const refetchedResponse = await axios.get('/axios-cache-interceptor', {cache: {// This time with interpretHeader disabledinterpretHeader: false}});const refetchedInformation = await axios.storage.get(refetchedResponse.id);log(`Third request TTL: ${refetchedInformation.ttl}`);
})().catch(console.error);
在这段使用 axios-cache-interceptor 的代码中，ttl 是 Time To Live（生存时间） 的缩写，它决定了 缓存条目在内存中可以保留多久（单位：毫秒）。
✅ 简单理解：
ttl= 缓存的有效期。过了这个时间，缓存就“过期”了，下次请求会重新从网络获取。
🔍 在代码中的具体作用
const axios = setupCache(createAxios({ baseURL: 'https://registry.npmjs.org/' }),{ ttl: 99999, interpretHeader: true } // ← 这里的 ttl
);
这里设置了两个关键配置：
| 配置项 | 作用 |
|---|---|
ttl: 99999 |
默认缓存有效期为 99,999 毫秒（约 100 秒） |
interpretHeader: true |
优先从 HTTP 响应头（如 Cache-Control、Age）中解析真实的缓存时间，而不是直接用 ttl |
🧠 interpretHeader: true 时的逻辑（重点！）
当 interpretHeader 为 true（默认值），ttl 只是“兜底值”，实际 TTL 会根据服务器返回的 HTTP 缓存头动态计算：
- 服务器返回：
Cache-Control: max-age=300 Age: 50 - 那么实际缓存时间 =
max-age - Age = 300 - 50 = 250 秒 - 这个 250 秒会覆盖你设置的
ttl: 99999 - 所以你在日志中看到：
log(`Cache TTL info: ${cacheInformation.ttl}`); // 输出的是 250000（毫秒），不是 99999！
💡 这就是为什么文档说：
“The TTL used was the maxAge cache directive minus the Age header”
🔁 对比：interpretHeader: false 时
当你在第三次请求中关闭了 interpretHeader：
const refetchedResponse = await axios.get('/...', {cache: { interpretHeader: false }
});
这时，完全忽略服务器的 Cache-Control 头，直接使用你配置的默认 ttl: 99999。
所以日志输出：
log(`Third request TTL: ${refetchedInformation.ttl}`);
// 输出 99999（毫秒）
📌 总结：ttl 的作用
| 场景 | ttl 的作用 |
|---|---|
interpretHeader: true（默认） |
备用值：当服务器没返回有效缓存头时才用 |
interpretHeader: false |
强制使用：所有请求都按这个时间缓存 |
| 单位 | 毫秒（ms） |
| 默认值 | 如果不传 ttl，默认是 1000 * 60 * 5（5 分钟） |
💡 最佳实践建议
- ✅ 保留
interpretHeader: true：尊重服务器的缓存策略，更符合 HTTP 标准 - ⚠️
ttl设为合理兜底值：比如60_000（1分钟），防止无缓存头的接口永久缓存 - ❌ 不要盲目设超大
ttl（如999999999），可能导致数据陈旧
🌰 举个现实例子
假设你请求 GitHub API：
- 它返回
Cache-Control: max-age=60 - 你的
ttl: 99999 - 实际缓存时间 = 60 秒（来自服务器），不是 100 秒
这样既利用了服务端的缓存策略，又在服务端没给缓存头时有兜底保障。
希望这下你彻底明白 ttl 是干啥的啦！它就像“保质期”，但聪明的缓存库会先看食品包装上的真实保质期（HTTP 头），只有包装没写时才用你给的默认保质期 😄