在前端开发中，HTTP 缓存是一种非常重要的技术，它可以显著提高应用程序的性能和用户体验。在 Angular 应用程序中，我们可以使用 Angular 的 HttpClient 模块来实现 HTTP 缓存。
HTTP 缓存的基本概念
HTTP 缓存是指在客户端（浏览器）和服务器之间缓存 HTTP 资源（例如 HTML、CSS、JavaScript、图片等），以便在后续的请求中可以更快地获取这些资源。HTTP 缓存的主要机制是使用 HTTP 头部中的缓存控制指令来控制缓存的行为。
HTTP 缓存主要分为两种类型：强缓存和协商缓存。强缓存是指在缓存有效期内直接从缓存中获取资源，而不需要向服务器发送请求。协商缓存是指在缓存过期后向服务器发送请求，服务器会根据请求头中的条件判断是否需要返回新的资源。
在 Angular 应用程序中实现 HTTP 缓存
在 Angular 应用程序中，我们可以使用 HttpClient 模块来实现 HTTP 缓存。HttpClient 模块提供了一些方法来控制 HTTP 缓存的行为。
强缓存
在 Angular 应用程序中，我们可以使用 HttpClient 的 get 方法来获取 HTTP 资源。在 get 方法中，我们可以使用一个可选的参数来控制缓存的行为。例如：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- --------------- -
----- ------- - --- ---------------------------------- ----------------
------ -------------------------- - ------- ---
-
-在上面的代码中，我们使用了 HttpHeaders 类来设置缓存控制指令。在这个例子中，我们设置了一个 max-age 指令来控制资源的缓存时间为 1 小时。这意味着在 1 小时内，如果再次请求这个资源，浏览器会直接从缓存中获取资源，而不需要向服务器发送请求。
协商缓存
在 Angular 应用程序中，我们可以使用 HttpClient 的 get 方法来获取 HTTP 资源。在 get 方法中，我们可以使用一个可选的参数来控制缓存的行为。例如：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- --------------- -
----- ------- - --- ---------------------------------- ------------
------ -------------------------- - -------- -------- ---------- --
------
------------ -- -
----- ---- - -----------------------------
--------------------------------- ------
--
--
-
-在上面的代码中，我们使用了 HttpHeaders 类来设置缓存控制指令。在这个例子中，我们设置了一个 no-cache 指令来控制资源的缓存行为为协商缓存。这意味着在缓存过期后，浏览器会向服务器发送请求，服务器会根据请求头中的条件判断是否需要返回新的资源。
在这个例子中，我们还使用了 tap 操作符来获取服务器返回的 ETag 值，并将其存储在本地存储中。ETag 是一种用于协商缓存的机制，它可以用于判断资源是否已经被修改。
组合强缓存和协商缓存
在实际开发中，我们通常会同时使用强缓存和协商缓存来实现更好的缓存效果。例如：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
------ - ----------- -- - ---- -------
------ - ---- --------- - ---- -----------------
-------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- --------------- -
----- ---- - ----------------------------------
----- ------- - --- ---------------------------------- ----------------
-- ------ -
---------------------------- ------
-
------ -------------------------- - -------- -------- ---------- --
------
------------------ -- -
-- ---------------- --- ---- -
------ ---------------------------------------------
- ---- -
----- ------- - -----------------------------
--------------------------------- ---------
----- ---- - --------------
---------------------------- ----------------------
------ ---------
-
--
--
-
-在上面的代码中，我们先尝试从本地存储中获取 ETag 值，然后使用 HttpHeaders 类来设置缓存控制指令和协商缓存指令。如果存在 ETag 值，则将其添加到请求头中。然后我们发送请求，如果服务器返回的状态码为 304，则说明资源未被修改，我们可以直接从本地存储中获取数据。否则，我们需要将新的 ETag 值存储到本地存储中，并将服务器返回的数据存储到本地存储中，然后返回这个数据。
总结
HTTP 缓存是一种非常重要的技术，它可以显著提高应用程序的性能和用户体验。在 Angular 应用程序中，我们可以使用 Angular 的 HttpClient 模块来实现 HTTP 缓存。在实际开发中，我们通常会同时使用强缓存和协商缓存来实现更好的缓存效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6602a1e7d10417a222e78587