1. 简介
作为一名前端开发人员，我们经常需要从服务器端获取数据。Angular 框架中提供了 HTTP 模块来方便我们与服务器进行交互，获取数据。本文就是一份指南，帮助你学习在 Angular 应用中如何使用 HTTP 模块。
2. 安装 HTTP 模块
在你开始使用 HTTP 模块前，你需要先安装它。你可以使用以下命令：
npm install @angular/common@latest @angular/compiler@latest @angular/core@latest npm install @angular/http@latest
安装成功后，在你的模块中导入 HTTP 模块：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-----------
-------- -
--------------
----------
--
-- ---
--
------ ----- --------- - -3. HTTP 请求
3.1 发送 GET 请求
下面的例子向服务器发送一个 GET 请求，并将响应数据作为一个 Observable 返回。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- ---------------
--------- -
------- ----------------------- -------------
-------------------
-
--
------ ----- ---------------- ---------- ------ -
--------- -------
------------------- ----- ----- --
---------- --
--------- -
-------------------------------------------------------------
--------------- -- ------------- - -------------
-
-3.2 发送 POST 请求
下面的例子向服务器发送一个 POST 请求，并将响应数据作为一个 Observable 返回。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- -------- -------------- - ---- ----------------
------------
--------- ----------------
--------- -
------- ------------------------ -------------
-------------------
-
--
------ ----- ----------------- ---------- ------ -
--------- -------
------------------- ----- ----- --
---------- --
--------- -
--- ------- - --- --------- --------------- ------------------ ---
--- ------- - --- ---------------- -------- ------- ---
--- ---- - ---------------- ------ ------ ----- ------ ------- - ---
------------------------------------------------------------ ----- --------
--------------- -- ------------- - -------------
-
-3.3 发送 PUT 请求
下面的例子向服务器发送一个 PUT 请求，并将响应数据作为一个 Observable 返回。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- -------- -------------- - ---- ----------------
------------
--------- ---------------
--------- -
------- ----------------------- -------------
-------------------
-
--
------ ----- ---------------- ---------- ------ -
--------- -------
------------------- ----- ----- --
---------- --
--------- -
--- ------- - --- --------- --------------- ------------------ ---
--- ------- - --- ---------------- -------- ------- ---
--- ---- - ---------------- --- -- ------ ------ ----- ------ ------- - ---
------------------------------------------------------------- ----- --------
--------------- -- ------------- - -------------
-
-3.4 发送 DELETE 请求
下面的例子向服务器发送一个 DELETE 请求，并将响应数据作为一个 Observable 返回。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- ------------------
--------- -
------- -------------------------- -------------
-------------------
-
--
------ ----- ------------------- ---------- ------ -
--------- -------
------------------- ----- ----- --
---------- --
--------- -
----------------------------------------------------------------
--------------- -- ------------- - -------------
-
-4. 更多配置
4.1 添加请求头
你可以通过创建 Headers 对象来添加请求头：
let headers = new Headers();
headers.append('Authorization', 'Bearer H8W51DlewFH');
this.http.get('http://api.domain.com/data', { headers: headers });4.2 添加 URL 参数
你可以通过对请求 URL 添加查询字符串参数来向服务器发送数据：
import { URLSearchParams } from '@angular/http';
let search = new URLSearchParams();
search.set('param1', 'value1');
search.set('param2', 'value2');
this.http.get('http://api.domain.com/data', { search });4.3 超时时间
使用以下方法，你可以设置请求超时时间：
import { RequestOptions } from '@angular/http';
let options = new RequestOptions({ timeout: 5000 });
this.http.get('http://api.domain.com/data', options);5. 总结
在 Angular 应用中使用 HTTP 模块可以帮助我们轻松地获取数据。在本文中，我们介绍了如何发送 GET、POST、PUT 和 DELETE 请求，并设置更多配置。希望这篇指南对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6549e7447d4982a6eb41cc78