当我们使用 Angular 调用服务器接口时，如果能够将接口数据缓存下来，可以提升应用的性能和用户体验。Angular HttpClient 提供了几种不同的缓存机制，本文将介绍这些机制的使用技巧，并提供示例代码。
缓存的优点
在向服务器请求数据时，网络延迟和数据处理时间是不可避免的。如果请求的数据可以缓存下来，在下一次请求时可以直接从缓存中读取，从而避免重新请求数据的延迟和耗时。此外，缓存还可以减少服务器的负载，提高应用的稳定性和可用性。
HttpClient 的缓存机制
Angular HttpClient 提供了三种缓存机制：
- 默认缓存（DefaultCacheInterceptor）
- 常规缓存（HttpCacheInterceptor）
- 无响应缓存（NoopInterceptor）
默认缓存
默认缓存是 Angular HttpClient 内置的缓存机制。当请求 URL 和请求方法都相同时，HttpClient 将使用内置的缓存来缓存响应结果。默认缓存是基于浏览器的缓存机制实现的，包括 HTTP 缓存头和 ETag 缓存。
默认缓存可以通过以下方式启用：
------ - ----------------- ---------- - ---- -----------------------
-----------
-------- -
----------------
-
--
------ ----- --------- -
------------------- ----- ----------- -
-- ------
-------------------------- - -------- ----------- ------ ---- --
------------------- -- -
----------------------
---
-
-上面的代码中，我们在 HttpClient 的请求中设置了 cache: true，这会启用默认缓存机制。
常规缓存
常规缓存是一个自定义的拦截器，使用 Angular 的 HTTP 拦截器机制实现。它可以根据配置来自定义缓存规则，并支持设置过期时间和自定义缓存键。常规缓存还支持对 POST、PUT、DELETE 等非幂等请求进行缓存的处理。
常规缓存需要使用自定义的拦截器来启用：
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ------------ ------------ - ---- -----------------------
------ - ----------- -- - ---- -------
------ - --- - ---- -----------------
-------------
------ ----- -------------------- ---------- --------------- -
------- ----- - --- ----------- ---------------------
-------------- ----------------- ----- ------------- -------------------------- -
-- ---------
----- -------- - -----------------------------
----- -------------- - -------- - ------------------------ - -----
-- ---------------- -
------ -------------------
-
------ ----------------------
--------- -- -
-- ------ ---------- ------------ -- --------- -
-- ----
------------------------ -------
-
--
--
-
-上面的代码定义了一个 HttpCacheInterceptor 类，它将请求结果缓存到一个 Map 中。我们可以使用该拦截器来启用常规缓存机制：
------ - -------- - ---- ----------------
------ - ----------------- ----------------- - ---- -----------------------
------ - -------------------- - ---- ---------------------------
-----------
-------- -
----------------
--
---------- -
- -------- ------------------ --------- --------------------- ------ ---- -
-
--
------ ----- --------- - -当然，我们需要在请求中指定缓存规则：
------ - --------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
------- ---- --------
--
--
------ ----- ------------ -
------ ----
------------------- ----- ----------- --
--------- -
----- ------- - --- ------------------------------ -------------
-------------------------- - ------- --------------------- -- -
--------- - ---------
---
-
-我们在请求头中指定了缓存键为 /api/data，这意味着响应结果将被缓存，下一次相同的请求将会使用缓存结果。
无响应缓存
无响应缓存是一种不缓存任何响应结果的缓存机制。它可以防止非幂等请求（如 POST、PUT、DELETE 等）误用缓存结果。
无响应缓存可以通过以下方式启用：
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- ------- - ----------------------------
-- --------- -
----- -------------- - ----------- -------- ------------------------------ ---
------ ----------------------------
-
------ -----------------
-
-上面的代码定义了一个 NoopInterceptor 类，它会检查请求头中是否包含 No-Cache 标志。如果包含该标志，将会禁用缓存机制，否则就按照正常流程处理。
我们需要在请求中添加 No-Cache 标志来启用无响应缓存：
------ - --------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ------------------------- -------------
--
--
------ ----- ------------ -
------------------- ----- ----------- --
---------- -
----- ------- - --- ----------------------------- --------
--------------------------- --- - ------- --------------------- -- -
----------------------
---
-
-上面的代码中，我们在 POST 请求中添加了 No-Cache 标志，这样缓存机制就不会被应用到该请求中。
结论
Angular HttpClient 提供了多种缓存机制，我们可以选择适合自己应用的机制来提高应用性能和稳定性。注意不同的缓存机制具有各自的优点和限制，我们需要根据自己的需求来选择合适的技术方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672448be2e7021665e12e82c