前言
在前端开发中，我们常常需要和后端进行交互，向服务器发送请求和处理响应数据等。而定制化的数据管理系统 DHIS2 是广泛应用于全球卫生领域的一款开源软件，它提供了一套丰富的 API 接口供我们使用。在 DHIS2 开发中，Angular 是一种流行的前端框架，并且 Angular 提供了一套强大的 HTTPClient 模块来帮助我们方便地处理 HTTP 请求。但是，对于初学者来说，使用 DHIS2 API 进行数据请求还是有一定难度，因为需要掌握特定的 API 请求格式、查询参数、请求头信息等。
为了简化 DHIS2 的 API 请求操作，@iapps 团队开发了一个 Angular 的 npm 包 @iapps/ngx-dhis2-http-client，它封装了 DHIS2 API 的请求和响应相关操作，为我们提供了一套简洁易用的 API 呼叫方式和响应数据处理方式。在接下来的文章中，笔者将为大家介绍该 npm 包的基本使用方法，并提供代码实例。
安装和导入
首先，我们需要将该 npm 包安装到我们的项目中。使用以下命令可以快速完成安装：
npm install @iapps/ngx-dhis2-http-client --save
安装完成后，在我们的项目中导入即可使用。
-- -------------------- ---- -------
------ - ------------------------ - ---- -------------------------------
-----------
------------- -
-- ---
--
-------- -
-- ---
----------------------------------
-------- -
------ --
------ ---
--
---------- --------
------- ---
---
--
---------- ---
---------- -
-- ---
--
--
------ ----- --------- --其中，NgxDhis2HttpClientModule 是定义 @iapps/ngx-dhis2-http-client 的模块；forRoot 是通过这个模块引入 NgxDhis2HttpClientModule 的配置项，我们可以把这些配置封装在一个配置文件里，然后在此处传入。
基本使用方法
在导入完该 npm 包后，我们可以直接使用服务来调用 API 来获取数据。比如，获取我们组织架构中所有领导的信息，我们可以使用函数 dhis2.fetchLeaders()：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------------- - ---- -------------------------------
------------
--------- -------------------
------------ --------------------------------
---------- ---------------------------------
--
------ ----- ----------- ---------- ------ -
----------- - ---
------------------- ------ -------------------------- --
---------- -
----------
---------------
----------------- ---- -- ----------------- - -------
-
-fetchLeaders() 函数是使用一个 HTTP GET 请求，它返回了所有领导的数据。
使用 DHIS2 API 的选项
在获取数据之前，我们需要向 DHIS2 发送请求并返回响应，这个过程中涉及到的请求选项包括使用的 API URL、请求方式等。@iapps/ngx-dhis2-http-client 提供了一些选项参数供我们选择。
-- -------------------- ---- ------- ----- ------- - - --------------- ------------------- -------------- ------ ---------------------- -- ------ ------- --------- ----------- ------- ------------------- -- ----- - ---------- ------ ------------ - - ------------------ ----- ------- - -------------------------------------------------------------- ----- ----- - - ------- ----- ----- -- --------- --- -- ----- ------- - - -------- -------- ----------- ------- ------ --
其中，headers 是 REST API 请求的 HTTP 头（这里包含了 Content-Type、Authorization 和 Accept 三种常用的头信息）；baseURL 是 API 地址的基本 URL。注意，这里使用了 @iapps/ngx-dhis2-http-client 中封装的 Dhis2HttpApi 类来获取 API 的根 URL 和命名空间 namespace、模型 model。query 是请求的参数列表，比如 PAGING、PAGE 和 PAGE_SIZE。
接着，我们使用以上选项参数调用 API 函数 get()，如下所示：
this.http.get(baseURL, options).subscribe((response) => {
const { body, headers, status, statusText } = response;
}, (error) => {});其中，get() 函数是使用 HTTP GET 请求获取数据的函数，fetchLeaders() 函数背后调用的就是 get() 函数，只是它的参数来自于默认配置项。
数据响应处理
在使用 DHIS2 API 获取到响应信息后，我们需要将其解析成需要的数据格式。@iapps/ngx-dhis2-http-client 中提供了一些工具函数来帮助我们完成这个工作。比如，我们可以使用 DhisIsId 函数将对象数组中元素的 id 属性转换成 Id：
const dataElements = response.body.dataElements.map((dataElement) => {
return {
Id: DhisIsId(dataElement.id),
Name: dataElement.displayName,
ShortName: dataElement.displayShortName,
Code: dataElement.displayCode,
};
});其中，dataElements 是处理后得到的数据变量，数据的结构是经过组织的对象数组，每个对象都拥有自己的 id、Name、ShortName 和 Code 属性。
关于数据的响应处理，@iapps/ngx-dhis2-http-client 提供了更详细的处理方式和多种解析工具，具体可以参考官方文档。
总结
通过本文，我们学习了 @iapps/ngx-dhis2-http-client 的基本安装、导入和使用方法，并了解了 DHIS2 API 的选项和 HTTPClient 的响应处理方式。在我们的开发日常工作中，保持熟悉这些操作技能是非常必要的。可以给大家提供一个方便快捷的操作方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/iapps-ngx-dhis2-http-client