如果你正在使用 Angular2 或者 Angular4, 并且想要拦截 HTTP 请求, 并增加, 修改或删除请求头, 请求数据或者响应数据, 那么 ng2-interceptors 这个 npm 包或许是你的绝佳选择。
本文将会详细的介绍如何使用 ng2-interceptors npm 包，通过以下几步:
- 安装
ng2-interceptorsnpm 包 - 编写一个 http interceptor provider
- 编写一个 app module provider（如果你是 Angular4 以上，这一步也可省略）
- 把 http interceptor provider 注册到 app module 中
- 配置 http options
1. 安装 ng2-interceptors npm 包
使用如下命令安装本模块：
npm install --save ng2-interceptors
2. 编写一个 http interceptor provider
接下来我们需要实现一个我们自己的 HTTP interceptor provider 来增加，修改或者删除请求头。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
------------------
---------------
--------
-------------------
---------
-----
-------
- ---- ----------------
------ - ---------- - ---- ------------------
------ --------------------------
------ ----------------------------
-------------
------ ----- ------------------ ------- ---- -
----------- --------- ------------------ --------------- --------------- -
-------------- ----------------
-
------------ ------ - -------- --------- -------------------- -------------------- -
------ ------------------ ---------------------------------
-
-------- ------- --------- -------------------- -------------------- -
------ -------------- ---------------------------------
-
--------- ------- ----- ------- --------- -------------------- -------------------- -
------ --------------- ----- ------------------------------------------------------------
-
-------- ------- ----- ------- --------- -------------------- -------------------- -
------ -------------- ----- ---------------------------------
-
----------- ------- --------- -------------------- -------------------- -
------ ----------------- ---------------------------------
-
------- ------------------------------ -------------------- ------------------ -
-- -------- -- ----- -
------- - --- -----------------
-
-- ---------------- -- ----- -
--------------- - --- ----------
-
-------------------------------------- --------------------
------ --------
-
------- ----------- ------- ---- -
-- ---------
------ ------------------------
-
-3. 编写一个 app module provider
如果你使用的是 Angular2, 那么在这一步我们需要在 app module 中用 provide 向全局注入我们刚刚编写的 HTTP interceptor provider
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------------------
------ - ----------- ---------- - ---- ----------------
------ - ------------------ - ---- ------------------------
-----------
---------- ---------------
------------- ---------------
-------- --------------- ------------
---------- -
-
-------- -------------------
----------- --------- ----------- --------------- --------------- -- -
------ --- --------------------------- ----------------
--
----- ------------ ---------------
-
-
--
------ ----- --------- --4. 把 http interceptor provider 注册到 app module 中
在这一步，我们需要把实现的 HTTP Interceptor 注册到 app module 中:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------------------
------ - ----------- ---------- - ---- ----------------
------ - ------------------ - ---- ------------------------
-----------
---------- ---------------
------------- ---------------
-------- --------------- ------------
---------- -
--------- ------------------- ------------ ------
-
-------- -----
----------- --------- ----------- --------------- --------------- -- -
------ --- --------------------------- ----------------
--
----- ------------ ---------------
-
-
--
------ ----- --------- --5. 配置 http options
使用 http.get() / http.post() / http.delete() 等方法时，我们也可以传入一些参数来修改http request：
let options = new RequestOptions({ headers: myheaders });
this.http.get(myUrl, options)
.map((res) => res.json())
.subscribe((data) => console.log(data));这里的 options 是可选的，通过该选项你可以覆盖原有请求的默认值 ，同样也可以增加请求头等数据。
示例代码
完整的 app.module.ts 和 interceptor.service.ts 代码如下：
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------------------
------ - ----------- ---------- - ---- ----------------
------ - ------------------ - ---- ------------------------
-----------
---------- ---------------
------------- ---------------
-------- --------------- ------------
---------- -
--------- ------------------- ------------ ------
-
-------- -----
----------- --------- ----------- --------------- --------------- -- -
------ --- --------------------------- ----------------
--
----- ------------ ---------------
-
-
--
------ ----- --------- --interceptor.service.ts
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
------------------
---------------
--------
-------------------
---------
-----
-------
- ---- ----------------
------ - ---------- - ---- ------------------
------ --------------------------
------ ----------------------------
-------------
------ ----- ------------------ ------- ---- -
----------- --------- ------------------ --------------- --------------- -
-------------- ----------------
-
------------ ------ - -------- --------- -------------------- -------------------- -
------ ------------------ ---------------------------------
-
-------- ------- --------- -------------------- -------------------- -
------ -------------- ---------------------------------
-
--------- ------- ----- ------- --------- -------------------- -------------------- -
------ --------------- ----- ------------------------------------------------------------
-
-------- ------- ----- ------- --------- -------------------- -------------------- -
------ -------------- ----- ---------------------------------
-
----------- ------- --------- -------------------- -------------------- -
------ ----------------- ---------------------------------
-
------- ------------------------------ -------------------- ------------------ -
-- -------- -- ----- -
------- - --- -----------------
-
-- ---------------- -- ----- -
--------------- - --- ----------
-
-------------------------------------- --------------------
------ --------
-
------- ----------- ------- ---- -
-- ---------
------ ------------------------
-
-使用上述步骤，我们已经可以使用 ng2-interceptors 拦截请求了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60937