当前位置：首页 > news >正文

这段代码中的 ttl是做什么的

news 2026/5/30 19:12:11

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 分钟）