在Web开发中，前端和后端之间的数据通信是一个非常重要的环节。而Angular5-rest正是一个非常优秀的npm包，它能够让前端直接和后端进行数据交互，大大降低了开发的难度和工作负担。本文将为你详细介绍如何使用该npm包及其具体功能。
什么是 angular5-rest？
Angular5-rest是一个基于Angular5框架的npm包，它旨在提供一个简单、易用的工具，用于在Angular5应用中建立RESTful API服务、发送HTTP请求以及解析响应。
使用angular5-rest的好处很明显，前端在使用RESTful API服务时能够更方便地调用后端的API，而不需要开发人员手动构建请求，并且可以方便快速实现与后端的数据通信。
安装 angular5-rest
在开始使用 angular5-rest 之前，我们首先需要把它下载到本地。可以使用如下指令将其安装至项目中：
npm install angular5-rest --save
其中，--save参数是用于将angular5-rest添加至项目中的package.json文件中，方便后续的依赖管理。
使用 angular5-rest
在安装完成后，我们就可以使用 angular5-rest 来构建RESTful API服务、发送HTTP请求等。下面将对angular5-rest的具体用法进行介绍。
1. 构建RESTful API服务
使用angular5-rest构建RESTful API服务非常简单，只需要使用如下代码即可：
-- -------------------- ---- -------
------ - ---- - ---- ----------------
------ - ----------- ---- ----- ---- ------- ----------------- - ---- ----------------
-------------
------ ----- ---------- ------- ---------- -
------- - --------------------------
----------------- ----- -------- ------------------ -
----------- ---------
-
-在上述代码中，我们首先引入了angular5-rest中需要使用到的几个对象，包括Http和RestClient。然后我们定义了一个ApiService服务，继承RestClient。这时，我们需要通过baseUrl属性来设置我们要请求的API链接，也就是我们定义的RESTful API服务的地址。
需要注意的是，上述代码中options参数必须被正确配置，否则angular5-rest将无法正确工作。我们可以使用如下方式对options进行配置：
-- -------------------- ---- -------
------ - ------------------------- ---------------- - ---- ----------------
------ ----- -------------------------- ---------- ------------------------ -
----------------------- ----------------- -
--- ------- - --- --------------------
-------------------------------------- ---------
------ --------
-
-
-----------
-------- -
-------------------------
-
-------- -------------------------
--------- --------------------------
-
-
-
--
------ ----- --------- - -在上述代码中，我们首先定义了一个RestClientOptionsFactory对象MyRestClientOptionsFactory，用于设置http请求的头文件信息。我们继承了RestClientOptionsFactory后，重写getRestClientOptions函数并返回RestClientOptions对象，通过headers属性来设置自定义头部信息。接着在AppModule中，以provide变量为标识符，声明我们使用自定义头文件的RestClientOptions对象。最后将这个模块引入到了我们的应用程序中。
2. 发送HTTP请求
在定义好RESTful API服务之后，我们接下来可以进行发送HTTP请求的操作。使用angular5-rest发送HTTP请求的方法也比较简单，只需使用@Get/@Post/@Put/@Delete修饰符即可实现发送各种类型的HTTP请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
-------------
------ ----- ----------- -
------------------- ----------- ----------- - -
-------------- -------- --------------- -
------ ------------------------------------------
-
--------------- -------- --------------- -
------ ---------------------------------------
-
-在以上代码中，我们定义了一个UserService服务，它需要调用我们之前定义的ApiService服务。在通过ApiService服务发送HTTP请求之前，需要先通过@Get/@Post/@Put/@Delete修饰符来定义要发送的HTTP请求，然后调用ApiService服务中对应的函数来实现HTTP请求。
3. 解析响应
使用angular5-rest发送HTTP请求并获得响应后，我们需要对响应进行解析。angular5-rest中使用RxJS来处理HTTP请求的响应数据。在RxJS中，我们可以使用Observable对象来处理异步的响应数据。
还是以之前定义的UserService服务为例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ---- - ---- ---------------
-------------
------ ----- ----------- -
------------------- ----------- ----------- - -
-------------- -------- ------------------ -
------ -----------------------------------------
-------- -- -----------------
-
--------------- -------- ---------------- -
------ --------------------------------------
-------- -- -----------------
-
-在以上代码中，我们使用map对请求的响应数据进行解析，并返回了解析后的Observable对象。
示例代码
最后，我们来看一下如何使用angular5-rest来实现一个获取用户信息列表的示例。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ----------------- ---------- ------ -
------- --------- -------
------------------- ------------ ------------ - -
---------- -
----------------------------
-----------
----- ------- -- -
------------- - ----
--
----- -- ------------------
--
-
-在以上代码中，我们定义了一个UserListComponent组件，在ngOnInit函数中调用了我们之前定义的UserService的getUsers函数来获取用户信息列表，并将返回的Observable对象保存在userList属性中，最后将用户信息在组件页面上进行展示。
小结
Angular5-rest提供了一种很方便的解决方案，让前端和后端之间的数据通信变得简单、快捷。使用RESTful API服务可以大大减轻开发人员的负担，而angular5-rest则可以让我们轻松实现RESTful API服务的定义、HTTP请求的发送以及响应的解析。当然，需要注意angular5-rest对象的配置和使用方式。相信通过本文的介绍，你已经能够顺利地使用angular5-rest来构建你的RESTful API服务了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b2f81e8991b448e53f1