Angular 8 HttpClient示例|如何在Angular中发送AJAX请求
Angular 8 HttpClient示例|如何在Angular中发送AJAX请求是今天的主题。目前，最新版本的Angular框架是Angular 8.如果您是Angular 8的新手，请查看我在此博客中的Angular 8 Tutorial。大多数前端应用程序通过HTTP协议与后端服务进行通信。现代浏览器支持两种不同的API来发出HTTP请求。
- XMLHttpRequest接口和
- fetch（）API。
我们将使用XMLHttpRequest进行Angular应用程序。
内容概述
- 1 Angular 8 HttpClient示例
- 2 #Angular HTTP模块
- 3 #Setup Angular 8项目
- 4 #Import HttpClientModule
- 5＃创建服务文件
- 6＃创建后端服务器
- 7＃在Angular中向服务器发送AJAX请求
- 8个HTTP标头
- 9 Angular中的#HTTP PUT请求
- Angular中的10 #HTTP PATCH请求
- 11 #HTTP DELETE在Angular中的请求
- 12 Angular中的#HTTP POST请求
Angular 8 HttpClient示例
@ angular / common / Http中的HttpClient为Angular应用程序提供了简化的客户端HTTP API，这些应用程序依赖于浏览器公开的XMLHttpRequest接口。 HttpClient的其他好处包括可测试性功能，类型化请求和响应对象，请求和响应拦截，Observable apis以及简化的错误处理。
#Angular HTTP模块
Angular HTTP模块都具有基于RxJS Observable的API。这意味着对HTTP模块的多次调用都将返回observable，我们需要以一种方式或另一种方式订阅。
以下是一些要点，请记住HTTP模块返回的特定类型的Observable。
- 如果我们不订阅可观察量，则不会发生任何事情。
- 如果我们多次订阅这些observable，将触发多个HTTP请求（有关更多详细信息，请参阅此文章）。
- 这种特殊类型的Observable是单值流：如果HTTP请求成功，这些observable只会发出一个值，然后完成。
- 如果HTTP请求失败，这些observable将发出错误，稍后将详细介绍。
#Setup Angular 8项目
我们已经设置了Angular CLI，现在我们需要使用以下命令创建项目。
ng ng ng8crud
它将创建一个新项目并安装所需的文件以设置样板。
#Import HttpClientModule
在使用HttpClient之前，需要导入Angular HttpClientModule。大多数应用程序都在根AppModule中导入。
// app.module.ts从'@ angular / core'导入{NgModule};从'@ angular / platform-browser'导入{BrowserModule};从'@ angular / common / http'导入{HttpClientModule}; @NgModule（{imports：（BrowserModule，//在BrowserModule之后导入HttpClientModule.HttpClientModule），声明：（AppComponent，），bootstrap：（AppComponent）}）export class AppModule {}
#Create服务文件
在Angular应用程序中，最佳做法是创建与特定模块相关的服务文件。
如果角度应用程序需要与后端服务器交互，那么我们可以在服务文件中编写API调用代码。
因此，如果我们需要向服务器发送POST请求，那么我们在服务文件中导入HttpClient，并使用数据对象向服务器发出AJAX请求。成功请求后，服务器会将响应发送回客户端。
您通常会对数据进行后处理，添加错误处理逻辑，以及一些重试逻辑以应对间歇性连接。
随着数据访问，组件很快变得混乱。组件变得难以理解，甚至更难以测试，并且数据访问逻辑不能被重用或标准化。
这就是为什么最佳做法是将数据表示与数据访问分开，方法是将数据访问封装在单独的服务中并委托给组件中的该服务。
因此，现在通过以下命令创建服务文件。
ng g s config
现在，在config.service.ts文件中编写以下代码。
// config.service.ts从'@ angular / core'导入{Injectable};从'@ angular / common / http'导入{HttpClient}; @Injectable（）导出类ConfigService {constructor（private http:HttpClient）{}}
#Create后端服务器
我们需要使用虚假数据，这就是我在本教程中使用一个名为json-server的软件包的原因。好的，让我们使用Yarn包管理器安装包。
yarn global添加json-server＃或npm install -g json-server
现在我们需要在src目录中创建一个名为data的文件夹，并在该文件夹中创建一个名为db.json的文件。让我们在db.json文件中添加以下数据。
{“characters”:( {“id”：“1”，“name”：“Peter Dinklage”，“age”：“45”}，{“id”：“2”，“name”：“Lina Heady” ，“age”：“43”}，{“id”：“3”，“name”：“Emilia Clarke”，“age”：“30”}，{“id”：“4”，“name”： “Kit Harrington”，“age”：“30”}，{“id”：“5”，“name”：“Sean Bean”，“age”：“50”}）}
现在，使用以下命令启动JSON服务器。
json-server --watch src / data / db.json --port 4000
现在，我们运行的服务器可以将我们的数据提供给我们的React Bootstrap应用程序。
我们的JSON服务器在port：4000处启动，URL为http:// localhost：4000 / characters。
＃在Angular中向服务器发送AJAX请求
我们创建了一个后端服务器并创建了一个服务文件。
现在，我们需要编写向Json服务器发送GET请求的代码。
因此，请在config.service.ts文件中编写以下代码。
// config.service.ts从'@ angular / core'导入{Injectable};从'@ angular / common / http'导入{HttpClient}; @Injectable（）导出类ConfigService {constructor（private http:HttpClient）{} url ='http:// localhost：4000'; getCharacters（）{return this .http .get（`${this.url} / characters`）; }}
以下是使用HTTP GET查询上述数据库并获取数据的小型服务示例。然后，这些数据将转到相关组件并使用HTML，我们可以在屏幕上显示数据。
上面的示例是在一个小型服务文件中使用HTTP模块，该文件显示一个字符列表。让我们一步一步地分解以下示例：
- 我们正在使用新的HttpClient客户端模块，并将其注入构造函数/
- 然后我们调用get（）方法，它返回数据。
HttpClient.get（）方法将JSON服务器响应解析为匿名对象类型。它不知道该对象的形状或属性是什么。
您可以告诉HttpClient响应的类型，使输出更容易，更突出。
首先，使用Characters属性定义接口。
export interface Characters {id：Number; name：String;年龄：数量; }
然后，将该接口指定为服务中的HttpClient.get（）调用的类型参数。
HTTP标头
如果我们想在HTTP请求中添加自定义HTTP标头，那么除了浏览器已经自动附加的标头之外。我们可以通过使用HttpHeaders类来完成此操作。
const headers = new HttpHeaders（）。set（“X-CustomHeader”，“自定义标题值”）; getCharacters（）{return this .http .get（`${this.url} / characters`，{headers}）; }
我们可以看到，HttpHeaders还有一个不可变的API，我们传递一个配置对象作为get（）调用的第二个参数。
这个配置对象只有一个名为headers的属性，就像我们定义的本地const一样 – 所以我们使用对象的简写创建符号来描述配置对象。
Angular中的#HTTP PUT请求
就像GET请求的情况一样，我们也可以使用Angular HTTP Client来执行所有其他可用的HTTP方法，即通常用于数据修改的方法，如PUT。
只有在我们想要替换资源的值时才应该使用PUT方法。
Angular中的#HTTP PATCH请求
通常情况下，我们要做的是更新单个属性，而不是提供资源的完整新版本。这是使用HTTP PATCH方法的主要用例。
PATCH请求在修补值的某些服务器端进一步修改的情况下非常有用，例如通过数据库触发器或Firebase规则。
Angular中的#HTTP DELETE请求
我们想要做的另一个常见操作是触发某些数据的逻辑删除。此操作可以完全擦除数据库中的数据或将某些数据标记为已删除。
Angular中的#HTTP POST请求
如果我们尝试的操作不符合上述任何方法的描述（GET，PUT，PATCH，DELETE），那么我们可以使用HTTP通配符修改操作：POST。
该操作通常用于将新数据添加到数据库，尽管还有许多其他用例。
最后，Angular 8 HttpClient示例|如何在Angular中发送AJAX请求已经结束。