前言
在前端开发中，我们经常需要从后台服务获取数据。一般情况下，我们可以使用 axios、fetch 等工具库来发送请求。但是如果后台接口返回的数据不太变化，每次都从后台拉取数据会浪费带宽和时间。而 cacheable-request 是一个用来缓存请求结果的 npm 包，可以大大减少重复请求，提高应用性能。
安装
通过 npm 安装 cacheable-request：
--- ------- ----------------- ------
使用
创建一个缓存请求对象
在应用程序的入口文件中导入 cacheable-request 并创建一个缓存请求对象：
----- ---------------- - ----------------------------- ----- ---- - ---------------- ----- ---------------- - --- -------------------------------
发送请求并缓存结果
现在我们可以使用 cacheableRequest() 方法来发送请求并自动缓存结果了：
----- --- - ---------------------------------------
------------------ --- -- ---------- -- -
--- ---- - ---
------------------- ------- -- - ---- -- ------ ---
------------------ -- -- -
------------------ -- -------------
---
---第一次请求时，将会向服务器发送请求，并将结果缓存起来。第二次相同的请求时，将会直接从缓存中获取结果。
清除缓存
如果需要手动清除缓存，可以使用 cacheableRequest.deleteCache(options) 方法：
------------------------------ --- ---
深度学习
cacheable-request 的核心原理是根据请求的参数（url、method、headers 等）生成一个唯一的 key，并将响应结果缓存在内存或磁盘中。当下次有相同请求时，会根据这个 key 直接从缓存中取出响应结果，而不用再向服务器发送请求。
指导意义
cacheable-request 能够有效地减小网络带宽和请求压力，提升应用性能。在前端开发中，尤其在移动端开发中网络环境比较差的情况下，更应该使用缓存技术来优化用户体验。当然，对于有权限控制或数据实时性要求比较高的接口，则不适合使用缓存技术。
示例代码
完整的示例代码如下：
----- ---------------- - -----------------------------
----- ---- - ----------------
----- ---------------- - --- -------------------------------
----- --- - ---------------------------------------
-- ---------
------------------ --- -- ---------- -- -
--- ---- - ---
------------------- ------- -- - ---- -- ------ ---
------------------ -- -- -
------------------ -- -------------
---
---
-- ----
------------------------------ --- ---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51283