在现代的 Web 应用中，前端应用程序通常使用 Restful API 与后端进行交互。随着应用程序的发展，处理大量请求、减少网络流量以及降低服务器负载等问题成为了越来越重要的需求。在这样的背景下，缓存技术成为解决这些问题的一个极为有效的工具。然而，传统的缓存方案通常需要涉及到大量的代码编写。为了解决这个问题，Ember.js 社区的开发者们开发了一个名为 ember-service-worker-smart-jsonapi-caching 的 npm 包，使用它，你可以轻松地实现缓存。
在本文中，我们将详细介绍如何使用 ember-service-worker-smart-jsonapi-caching 包。
环境准备
在开始之前，确保你已安装了 node.js 和 npm。ember-service-worker-smart-jsonapi-caching 是一个 Ember CLI 插件。因此，你需要在使用它之前，首先安装 Ember CLI。
安装
安装该 npm 包最快捷的方式是使用以下命令：
ember install ember-service-worker ember-service-worker-smart-jsonapi-caching
完成这一安装即可使用 ember-service-worker-smart-jsonapi-caching 插件，它会将 Service Worker 和缓存层添加到你的 Ember 应用中。
配置
打开 config/environment.js 文件，使用如下代码片段来启用该服务：
-- -------------------- ---- -------
-- ------------ --- ------------- -
--------------------------- - -
-------- -----
--------------------- ---------
------------------ ---------------------
------ ------
--------------- -
---------------------------------------------------
-----------------------
----------------
------------------
--
------------- -
----------------
--
------------------ --
----------- -----------------------------
---------------- -
------ -
----------- --
----- ----------------------
--
---------------------- -
-
--
--
-上述代码中，我们开启了 ember-service-worker。如果你已经开启了 Service Worker，跳过这行代码即可。
我们同时配置了 smart-json-api-cache，对于 posts 和 comments 的内容会在一段时间内缓存。cache 参数中的 maxEntries 告诉插件我们需要在缓存中存储多少条帖子和评论。这里，我们将它们都设置为 5。
urlPattern 表示我们需要缓存哪些内容。我们可以使用正则表达式或字符串的方式指定这个内容。
为了避免网络中断等其他问题，我们使用 networkTimeoutSeconds 属性表示，在 3 秒钟网络没有响应时，我们可以放弃网络请求。所有的缓存数据都将从内置的离线存储中获取。
示例代码
以下是一个示例代码，用于显示提交给该 API 端点的所有帖子。如果启用了 smart-json-api-caching，这个代码将从缓存中读取数据。否则，它将发出 API 请求并更新缓存。如果应用程序离线，帖子将从缓存中读取数据。
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ ------------ ---- --------------------------
------ - ------- - ---- --------------------
------ - ---------- - ---- -----------------------------------------------------------------
------ ------- ----- -------------- ------- --------- -
-------- ------
------------- -
--------------------
---------- - ------------
---- ----------------
----------- --
------ -- -- ----------------------------- ------
---
-
-在上面的代码中，cacheFirst() 函数是一个实用工具方法，它根据缓存规则返回一个 Promise 对象。如果数据已缓存，该 Promise 将从缓存中获取数据。否则，它将发出网络请求，并将结果缓存到本地。在这个示例中，我们使用它获取帖子。如果你想要缓存其他数据模式，你也可以像这个示例一样使用该工具方法。
总结
恭喜你，你已经了解了使用 Ember.js 插件 ember-service-worker-smart-jsonapi-caching。使用这个插件能够对缓存进行高效处理，减少之后的 API 请求和网络流量。如果你想要更详细的文档和更多的示例，请参阅 npm 包的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdc81e8991b448d9809