Angular HttpClient 缓存的使用技巧

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

当我们使用 Angular 调用服务器接口时，如果能够将接口数据缓存下来，可以提升应用的性能和用户体验。Angular HttpClient 提供了几种不同的缓存机制，本文将介绍这些机制的使用技巧，并提供示例代码。

缓存的优点

在向服务器请求数据时，网络延迟和数据处理时间是不可避免的。如果请求的数据可以缓存下来，在下一次请求时可以直接从缓存中读取，从而避免重新请求数据的延迟和耗时。此外，缓存还可以减少服务器的负载，提高应用的稳定性和可用性。

HttpClient 的缓存机制

Angular HttpClient 提供了三种缓存机制：

  1. 默认缓存（DefaultCacheInterceptor）
  2. 常规缓存（HttpCacheInterceptor）
  3. 无响应缓存（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

阅读全文

猜你喜欢

  • 如何在 Next.js 应用中使用 Tailwind CSS

    Tailwind 是一种功能丰富且高度可定制的 CSS 框架。Tailwind 直接提供了开箱即用的 CSS 类，这大大简化了前端开发过程中的样式编写，使得开发者可以更快地构建出漂亮的界面。

    10 天前
  • 响应式设计中如何处理长页面

    对于现代网站和应用程序，长页面已经成为了非常常见的现象。通过响应式设计，我们可以将内容布局在各种设备大小的屏幕上并实现优秀的用户体验。在本文中，我们将探讨如何在响应式页面中处理长页面。

    10 天前
  • Mocha 测试多版本 Node.js 环境

    Node.js 是一种现代化且高效的 JavaScript 运行环境，它能够实现在服务器端运行 JavaScript。随着 Node.js 的发展，其版本不断更新，小版本或大版本之间的差异也越来越大。

    10 天前
  • Express.js 的环境配置和静态文件服务处理

    在前端开发中，环境配置和静态文件服务处理是非常重要的一部分内容。而 Express.js 是一个常用的 Node.js Web 应用程序框架，可用于搭建服务器端应用程序。

    10 天前
  • 安全考虑：无服务器应用程序框架中的权限控制（Serverless）

    随着无服务器应用程序框架的流行，越来越多的企业和开发者将应用程序部署到云端。无服务器应用程序框架可以让开发者更加专注于业务逻辑的开发，而不必担心基础架构的维护问题。

    10 天前
  • Jest 测试中如何检测 JavaScript 代码的内存泄漏

    在前端开发中，内存泄漏是一个常见的问题，它会导致浏览器性能下降、页面卡顿、甚至崩溃。在开发过程中，怎么保证我们的 JavaScript 代码不会出现内存泄漏呢？本文将会介绍如何使用 Jest 对 Ja...

    10 天前
  • WebSocket + Socket.io 实现在线聊天的完整教程

    随着互联网的发展，越来越多的人开始将他们的生活和工作转移到线上，这也加速了在线聊天工具的发展。WebSocket 和 Socket.io 是两种用于实现实时双向通信的技术。

    10 天前
  • Angular 编译环境下的环境变量分离技巧

    背景 在实际的开发工作中，我们经常需要对同一个项目进行不同环境的部署，比如本地开发环境、测试环境、预生产环境和生产环境。但是这些环境往往需要不同的配置，比如 API 地址、数据库地址等等。

    10 天前
  • Node.js 高级调试技术：使用 V8 和 Chrome 调试器

    Node.js 是目前充满活力的开发平台之一，它为开发者提供了能够轻松开发高性能、可伸缩性强的应用程序的工具和库。不过，当我们面对复杂的 Node.js 应用程序时，尤其是那些存在着复杂性和潜在问题的...

    10 天前
  • 如何使用 JavaScript Promise 实现批处理请求？

    在前端开发中，我们常常需要通过网络请求获取数据。当我们需要获取大量数据时，单个请求的速度往往不能满足我们的需求，这时候我们就需要通过批处理请求来提高请求速度。本文将会介绍如何使用 JavaScript...

    10 天前
  • Cypress 如何使用 Concourse 进行持续集成

    在前端开发中，持续集成已经成为不可或缺的一部分。为了保证代码的质量和稳定性，开发人员需要定期地构建和测试代码。而 Concourse 是一个非常强大的持续集成工具，可以实现自动化构建、测试以及部署。

    10 天前
  • 使用 Fastify 和 GraphQL 构建强大的 API 后端

    在现代 web 应用中，API 后端是不可或缺的一部分。传统的 REST API 已经不再满足开发人员的需求，GraphQL 比 REST 更加灵活和强大，拥有很多令人激动的特性，例如 可以减少网络开...

    10 天前
  • Node.js 性能调优：你不能错过的 5 个技巧

    Node.js 是一种事件驱动的 I/O 模型，可实现高效的服务器端编程。但是，尽管 Node.js 一度声名鹊起，但在高并发下，它还是会遇到性能问题。为了解决这些问题，我们需要进行性能调优。

    10 天前
  • ES9 初学者指南

    随着 Web 技术的快速更新，前端开发者也需要不断精进自己的技能来跟上时代变迁。ES9 是 JavaScript 的最新版本之一，它新增了很多有用的功能来提高开发效率，让我们一起来看看。

    10 天前
  • 响应式设计案例解析

    随着移动设备和平板电脑的普及，响应式设计已成为现代 Web 设计必须物。本文将为您介绍响应式设计的概念和优点，并通过一个实际案例来指导您实现响应式设计。 什么是响应式设计？ 响应式设计（Respons...

    10 天前
  • ES2020 的新特性：可选括号的箭头函数

    在 ECMAScript 2020（简称 ES2020）中，JavaScript 引入了许多新特性，其中包括可选括号的箭头函数。这个新特性引起了前端开发者的广泛关注，因为它可以增加代码的可读性和可维护...

    10 天前
  • 无服务器架构：如何构建和维护无缝的部署流程（Serverless）

    随着云计算技术的发展，无服务器架构（Serverless Architecture）逐渐成为了业界的热门话题。无服务器架构通过将应用程序的构建和部署工作交给云服务提供商来完成，使得开发者无需担心底层基...

    10 天前
  • Vue.js 的事件机制：从 emit 到 on

    前言 Vue.js 是一种流行的前端框架，它的事件机制是其核心功能之一。在 Vue 中，事件是一种信号，可用于在组件之间传递数据。事件机制是基于发布订阅模式实现的。

    10 天前
  • Cypress 如何使用 GitHub Actions 进行持续集成

    Cypress 是一种流行的用于执行端到端测试的前端自动化框架。与其他测试框架不同，它能够帮助你轻松地在浏览器中运行测试，并提供了一些很好的工具和 API，使得测试更加容易和可维护。

    10 天前
  • 基于.NET Core创建RESTful API的教程

    简介 RESTful API是HTTP协议的常用API设计方式，能够提供一套标准的API接口规范，使不同平台的应用能够进行互相通信。在前端开发中，开发人员可以使用RESTful API来实现应用程序和...

    10 天前

相关推荐

    暂无文章