在前端开发中，Http 请求的缓存是一个很重要的问题。如果我们的应用程序需要使用多个 Http 请求，那么每个请求都需要单独发送，并且需要等待每个响应。这将导致应用程序响应变慢，并且会对服务器造成额外的负担。为了解决这个问题，我们可以使用 Angular 6.x 和 RxJS 6.x 中的Subscription 做多个 Http 请求缓存。
RxJS 6.x
RxJS 是一个基于事件流和响应式编程的库，可以简化异步编程的任务。它提供了一组用于构建基于事件和数据流的应用程序的工具和模式。
RxJS 6.x 是 RxJS 的最新版本。它在 5.x 版本的基础上进行了重大改进，包括更好的性能和可读性，更小的包大小，更好的错误处理和优化的 API。
Angular 6.x
Angular 6.x 是基于 TypeScript 的开发框架，用于构建 Web 应用程序。它是最受欢迎的前端框架之一，有许多功能，例如组件，服务，指令等。
Subscription
Subscription 是一个 RxJS 类，它可以订阅和取消订阅 Observable。当我们使用 Observable 发出一个值时，Subscription 对象将根据我们的需求执行相应的操作。例如，我们可以使用 Subscription 来取消订阅 Observable，或者在关闭组件时取消订阅 Observable。
多个 Http 请求缓存
多个 Http 请求缓存的基本思想是，当我们订阅 Observable 时，如果数据已经存在于本地缓存中，则不需要向服务器发出请求，而可以直接使用缓存的数据。
以下是如何使用 Angular 6.x 和 RxJS 6.x 编写多个 Http 请求缓存的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- -- - ---- -------
------ - ---- ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- ----- - --- ----------- -------
------------------- ----- ----------- --
----------- -------- ------------- -
----- ----------- - --------------------
-- ------------- -
------ ----------------
-
------ ---------------------------
--------- -- ------------------- --------
---------------- -- -
-----------------------
------ ---------
--
--
-
------------ -
-------------------
-
-
在上面的代码中，我们首先创建了一个名为 HttpCacheService 的服务，并在该服务中实现了 get 和 clearCache 函数。get 函数用于发送 Http 请求，并从服务器获取响应。如果响应成功，它将缓存响应的数据，并返回 Observable。如果响应失败，则使用 catchError 函数从缓存中删除数据并返回获取空值的 Observable。
现在我们有了 HttpCacheService 服务，可以在我们的组件中使用它来实现多个 Http 请求缓存。以下是一个名为 UserService 的示例组件，该组件使用 HttpCacheService 服务来缓存多个 Http 请求。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------ ------
------ ------
------------------- ------ ----------------- --
---------- -
----------------------------------------------------------------
---- -- -
---------- - -----
--
----- -- -
--------------------- -------
-
--
----------------------------------------------------------------
---- -- -
---------- - -----
--
----- -- -
--------------------- -------
-
--
-
------------ -
------------------------
-
-
在上面的代码中，我们实现了一个名为 UserComponent 的组件，并从 HttpCacheService 服务获取用户和存储库列表。通过使用 cache.get 函数而不是 http.get 函数，我们可以自动获取缓存结果（如果存储在缓存中）。
此外，我们还实现了一个名为 clearCache 的函数，该函数用于清除缓存。通过使用 cache.clearCache 函数，我们可以随时清除缓存。这对于当我们需要刷新缓存时非常有用。
结论
通过使用 Angular 6.x 和 RxJS 6.x 中的 Subscription 做多个 Http 请求缓存，我们可以改善应用程序的性能，并减轻服务器的负担。在本文中，我们了解了 Subscription 类的基础知识，并展示了如何使用 HttpCacheService 服务来实现多个 Http 请求缓存。希望这篇文章有助于您了解如何使用 Subscription 来改善应用程序性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775efda6d66e0f9aa077587