axios缓存响应数据 缓存api 缓存请求

文章目录

• 1.HTTP缓存技术
• 1. 强缓存策略与协商缓存策略流程概述

• 1.1. 强缓存策略流程
• 1.2. 协商缓存策略流程

• 2. 强缓存与协商缓存涉及的头部字段

• 2.1. 强缓存
• 2.2. 协商缓存

• 3.完整流程
• 参考文章

1.HTTP缓存技术

对于一些具有重复性的 HTTP 请求，比如每次请求得到的数据都一样的，我们可以把这对「请求-响应」的数据都缓存在本地，那么下次就直接读取本地的数据，不必在通过网络获取服务器的响应了，这样的话 HTTP/1.1 的性能肯定肉眼可见的提升。

所以，避免发送 HTTP 请求的方法就是通过缓存技术，HTTP 设计者早在之前就考虑到了这点，因此 HTTP 协议的头部有不少是针对缓存的字段。

HTTP 缓存有两种实现方式，分别是强缓存和协商缓存。

浏览器会将需要缓存的资源以「请求 : 响应」这样的KV对格式缓存在本地。当浏览器尝试发起请求访问资源之前，会先根据URL和请求头在本地尝试命中缓存。

• 若成功命中缓存，则不再发起HTTP请求，直接使用本地缓存；
• 若未能命中缓存，则重新发起请求，并根据不同的缓存策略作出不同的行动。

协商缓存 更加常用，而使用协商缓存时，If-None-Match / Etag

1. 强缓存策略与协商缓存策略流程概述

强缓存和协商缓存

缓存类型	获取资源形式	状态码	是否发送请求到服务器
强缓存	从缓存取	200（from disk cache）	否，直接从缓存取
协商缓存	从缓存取	304（not modified）	是，通过服务器来告知缓存是否可用

1.1. 强缓存策略流程

若缓存已过期，浏览器重新发起请求，强制服务器将最新的资源放入响应body并返回。

• 首次获取服务器某资源时，浏览器发起请求，并将响应中的资源缓存在本地；
• 再次获取服务器某资源时，浏览器优先在本地搜索缓存：

• 若缓存未过期，使用本地缓存中的资源，此时状态码可能为 “200（from disk cache）”；
• 若缓存已过期，重新发起请求，服务器将最新的资源返回，此时的状态码为 “200 OK”，浏览器将重新进行缓存。

1.2. 协商缓存策略流程

若缓存已过期，浏览器重新发起请求，与服务器协商是否应继续使用本地缓存。

• 首次获取服务器某资源时，浏览器发起请求，并将响应中的资源缓存在本地（会比强缓存多一个响应头）；
• 再次湖区服务器某资源时，浏览器优先在本地搜索缓存：

• 若缓存未过期，使用本地缓存中的资源，此时的状态码可能为 “200（from disk cache）”（与强缓存一致）；
• 若资源已过期，重新发起请求（将先前响应头中的数据放入请求头），询问资源是否被修改：

• 若服务器判断资源未被修改，则响应体中无数据，浏览器继续使用缓存，状态码为 “304（Not Modified）”；
• 若服务器判断资源已被修改，则在响应体中返回新的资源，此时的状态码为 “200 OK”，浏览器将重新进行缓存。

2. 强缓存与协商缓存涉及的头部字段

2.1. 强缓存

强缓存使用 Cache-Control

Cache-Control: max-age=3600

表示该资源将在3600s后被浏览器判定为过期。

2.2. 协商缓存

协商缓存在使用 Cache-Control 的基础上，还通过其他的字段来协同控制（Etag更为常用）：

• [If-None-Match / Etag] 当浏览器从服务器获取资源时，响应头中会携带 Etag

If-None-Match: x			// x 为该资源的Etag值

• [If-Modified-Since / Last-Modified] 与上述类似，响应头中有 Last-Modified

If-Modified-Since: t		// t 为该资源最近修改的时间

3.完整流程