随着前端应用的复杂性增加，http 请求的优化也变得愈发重要。在 Angular 单页应用（SPA）中，有许多技术和方法可以用来优化 http 请求，提高应用的性能和用户体验。
1. 使用拦截器
Angular HttpInterceptor 这个 API 可以在 HTTP 请求发出、响应结束时添加额外的逻辑。使用拦截器可以在应用代码中集中处理 HTTP 请求和响应，减少重复代码。另外，在一个拦截器中，可能有多个 HTTP 请求需要处理。
下面的代码演示了在请求中添加 token 的逻辑。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
----------------
------------
------------
- ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- --------------- ---------- --------------- -
------------------- ------------ ------------ --
----------
---- -----------------
----- -----------
-- -------------------------- -
----- ----- - ----------------------------
----- ------- - -----------
-------- -------------------------------- ------- - - -------
---
------ ---------------------
-
-2. 缓存 GET 请求
缓存 GET 请求是一种优化 http 请求的常用方法。在使用http做GET请求时，通过加上responseType设置为'arraybuffer'可以将response作为blob类型返回。根据特定的时间间隔或者其他条件，可以选择清除缓存，这样可以将请求数量降低到很低的水平，从而减少服务端压力。缓存可以在服务端或者浏览器本地进行。
以下代码展示了如何使用 angular-cache 和 RxJS 缓存 GET 请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------------ - ---- ----------------
------ - -- - ---- -------
------ - --- - ---- -----------------
------------- ----------- ------ --
------ ----- ----------- -
------- -------- - -------------
------------------- ----- ----------- ------- ------ ------------- --
---------- --------------- -
----- --- - --------------------------
----- ---------- - ------------------------------
-- ------------ -
------ ---------------
- ---- -
------ ------------------------
---------- -- -
----------------------------- ------
--
--
-
-
-3. 压缩响应
压缩响应是减少 http 请求传输数据量的一种方式。当服务端返回一些文本消息时，可以使用 gzip 或 deflate 对响应进行压缩。同样的，浏览器也可以对请求头中支持的响应类型作出压缩处理。
以下代码展示了如何配置服务端压缩响应。
import compression from "compression"; import express from "express"; const app = express(); app.use(compression());
4. 减少 cookie 大小
web 应用中 cookie 是一种持久性的存储机制，它存在于客户端上。cookie 大小的增加将带来额外的网络负担，减低了应用的性能。在 Angular 中，使用 HttpInterceptor 可以在请求中减少 cookie 的大小，使用本地存储器保存 session 和 token 等重要数据，同时可以明确定义 cookie 在何时何处使用。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------------
------------
------------
- ---- -----------------------
-------------
------ ----- ----------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
----- ----------- - -----------
---------------- ------
---
------ -------------------------
-
-5. 将请求转换为 POST
对于大量数据的传输，通常不应该使用 GET 请求。如果GET请求的响应长度超过2K bytes，但又不像POST一样需要马上响应，这样我们就可以考虑将请求转换为POST请求。
以下是如何将 POST 请求转换为 GET 请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------------
------------
------------
-----------
- ---- -----------------------
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
-- ----------- --- ------ -
----- ------ - -----------
------- -------
---
----- ------ - --- -------------
------------------------------- -- -
--------------- ---------------------
---
------ --------------------
- ---- -
------ -----------------
-
-
-结论
在 Angular SPA 应用中使用上述方法可以优化 http 请求，提高应用的性能和用户体验。除此之外，还有其他方式可以优化 http 请求，如通过分页或者分批加载数据来减少请求的数量等。每个 web 应用都有其特定的场景和情况，应该根据情况选择合适的优化方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677208bb6d66e0f9aad3dd4f