在前端开发中，我们常常需要对客户端与服务端的数据进行交互。为了减小服务器的负载，我们通常会对一些常用的数据进行缓存，然后在客户端需要时直接从缓存中获取，而不是再次向服务器请求数据。
而 ngx-rim-interceptor-cache 这个 npm 包，则是一个封装了拦截器的 Angular 缓存工具，可以针对不同的请求进行缓存，增加网站的响应速度，提高用户体验。
安装
使用 npm 即可安装 ngx-rim-interceptor-cache，并将其添加到项目的依赖中：
npm install ngx-rim-interceptor-cache --save
使用
导入模块
将 ngx-rim-interceptor-cache 添加到你的应用模块中的 providers 数组中：
-- -------------------- ---- -------
------ - ---------------------------- - ---- ----------------------------
-----------
---
-------- -
---
---------------------------------------
---
--
---
--使用服务
在需要使用的组件中建立并使用 NgxRimInterceptorCacheService，比如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------------------------- - ---- ----------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- -----------
------- ------------------------------ ------------------------------ - -
-- -------
-------------- -
--------------------------------------------------------
--- -- -
-----------------
-- ---------
--------------------------------------------------- -----
-
--
-
-- --------
-------------- -
----- ---------- - ----------------------------------------------------
------------------------
-
-API
| 函数名 | 描述 |
|---|---|
| addCache(cacheKey, cacheValue) | 将 cacheValue 添加到指定的 cacheKey 中。 |
| removeCache(cacheKey) | 移除指定 cacheKey 缓存的值。 |
| removeCacheStartWith(startStr) | 移除所有以 startStr 开头的缓存。 |
| removeAllCache() | 移除所有的缓存。 |
| getCache(cacheKey) | 获取 cacheKey 下的缓存。 |
注意事项
在使用 ngx-rim-interceptor-cache 的时候，需要注意以下几点：
使用时需要在应用模块的 providers 中导入 ngx-rim-interceptor-cache 服务。
缓存到的数据只会在内存中生效，刷新该页面会丢失缓存。
必须针对不同的请求单独设置缓存时间，并在超过缓存时间后清除该缓存。
结语
ngx-rim-interceptor-cache 提供了一个简便而优秀的解决方案，让我们在前端开发中可以更加方便地进行数据缓存，从而对网站性能的提升有所帮助。实际上，数据缓存不仅仅是在前端中有用，在后端服务器开发中也同样是一个重要而必要的环节，读者可以进一步了解精进自己的后端开发技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53e0e