简介
npm 包 angular2-http 是基于 Angular2 框架的一款常用的 HTTP 客户端。它能够帮助前端开发者方便地进行网络请求，处理响应数据，并对错误进行处理。本文将为大家介绍 angular2-http 的使用方法及示例代码。
使用方法
- 安装 angular2-http
在项目根目录下打开终端命令行，输入以下命令安装 angular2-http：
$ npm install angular2-http --save
这里我们使用了 -save 参数，它可以将我们安装的模块保存到 package.json 文件的 dependencies 中，方便其他开发者或者用户下载我们的项目时可以自动安装所需的模块。
- 引入 angular2-http
在你的项目入口文件 app.module.ts 中，导入并注入 HttpModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------- - ---- ----------------
-----------
-------- -
-----------
---
-
---
--
------ ----- --------- - -这里我们需要使用 Angular 核心库中的 NgModule 装饰器来装饰我们的模块，并在 imports 中注入 HttpModule，这个模块提供了一些便捷的方法来发送 HTTP 请求和处理响应数据。
- 发送 HTTP 请求
在你的组件中，你可以使用 Http 服务向指定的 URL 发送 HTTP 请求，可以使用以下的 GET，POST，PUT 等方法之一来发送请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ------
------- ------ - -----------------------------------
------------------- ----- ----- --
---------- -
---------
-----------------
------------------- -- -
-----------------------------
---
-
-在这个示例中，我们使用了 Http 服务提供的 get 方法来向 apiUrl 发送 HTTP GET 请求，并在订阅响应的回调函数中使用了 response.json() 方法将响应转换为 JSON 格式，并打印到控制台中。
同样，你可以使用 Post，Put，Delete 等方法来发送不同的 HTTP 请求。
- 响应数据处理
在使用 Http 服务发送请求时，我们可以使用 subscribe 方法来订阅响应，以便我们可以处理响应数据。我们可以在 subscribe 方法的回调函数中使用响应对象的一些方法，如 json()，text()等方法来获取我们所需要的响应数据。
同时，我们还可以利用 Angular2 提供的 map 操作符对响应数据进行处理。map 方法返回一个新的 Observable 对象，我们可以在其中对响应数据进行各种操作：
getUsers() {
this.http
.get(this.apiUrl)
.map(response => response.json().data)
.subscribe(users => {
console.log(users);
});
} 这个示例中，我们使用了 map 操作符将响应数据中的 data 字段提取出来，并将其包装成一个新的 Observable 对象，最后将其订阅并打印到控制台中。
- 错误处理
在使用 Http 服务发送请求时，我们还需要考虑错误处理。我们可以在订阅响应的回调函数中使用 catch 操作符来捕获 HTTP 请求的错误并进行处理：
-- -------------------- ---- -------
---------- -
---------
-----------------
------------- -- ---------------------
---------------- -- -
-------------------
-- ----- -- -
---------------------------
---
- 在这个示例中，我们仍然使用 map 操作符来提取响应数据，并在订阅回调函数中使用了两个函数，分别为成功回调和错误回调。在错误回调中，我们打印出了错误信息的内容。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ------
------- ------ - -----------------------------------
------------------- ----- ----- --
---------- -
---------
-----------------
------------- -- ---------------------
---------------- -- -
-------------------
-- ----- -- -
---------------------------
---
-
-结论
npm 包 angular2-http 的使用非常地简单，可以让我们轻松处理 HTTP 请求与响应，并对错误进行处理。希望本文对大家能有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3f81e8991b448db0c3