Angular 10示例:导入HttpClientModule并向JSON REST API服务器发送Http Ajax请求

HttpClientModule将HttpClient的依赖注入器配置为支持XSRF的服务。

在这个例子中，我们将看到如何在Angular中导入HttpclientModule，并使用HttpClient向JSON REST API服务器发送一个http Ajax GET请求。

什么是HttpClient以及它与Ajax的关系?

HttpClient是一种处理HTTP请求的服务，它建立在XMLHttpRequest之上，XMLHttpRequest是Ajax的遗留API。

Ajax呢?

Ajax代表异步JavaScript和XML，是一种无需刷新整个页面就能从服务器请求数据并使用XML结果重新呈现页面相关部分的技术。

在现代web中，Ajax指的是从客户端JavaScript发送到服务器的任何异步请求。通常，响应是JSON或HTML片段，而不是XML。

如何使用HttpClient?

它可以注入到其他服务和组件中。它导出用于发出HTTP Ajax请求的方法，如get()、post()、put()和delete()，并返回各种类型的HTTP响应，如json、text和blob。

HttpClient提供了许多好处，如可测试性、类型化请求和响应对象、请求和响应拦截、可观察api和简化的错误处理。

HttpClient的方法是基于RxJS的observable，所以我们在使用它们的时候需要注意以下几点:

    您需要订阅从该方法返回的可观察对象，以实际向服务器发送http请求。如果您多次订阅返回的observable，多个HTTP请求将被发送到服务器。返回的可观察对象是一个单值流，这意味着它将只发出一个值并完成。

步骤1 -创建一个Angular 10项目

如果你不熟悉这些快速入门文章，你需要安装Angular CLI并搭建一个新项目。

步骤2 -导入HttpClientModule?

在Angular 10应用程序中使用HttpClient之前，需要导入HttpClientModule。

src / app / app.module开放。从@angular/common/http中导入HttpClientModule:

import { NgModule }         from '@angular/core';  
import { BrowserModule }    from '@angular/platform-browser';  
import { HttpClientModule } from '@angular/common/http';

接下来，您需要添加它HttpClientModule，如下所示:

@NgModule({  
imports: [  
BrowserModule,  
// import HttpClientModule after BrowserModule.  
HttpClientModule,  
],  
declarations: [  
AppComponent,  
],  
bootstrap: [ AppComponent ]  
})  
export class AppModule {}

步骤3 -使用Angular 10 HttpClient发送Ajax GET请求

导入HttpClientModule之后，您可以使用可以注入到任何服务或组件中的HttpClient服务发送http请求。

打开src/app/app.component.ts文件并导入HttpClient，如下所示:

import { HttpClient } from '@angular/common/http';

接下来，通过组件的构造函数注入HttpClient，如下所示:

constructor(public httpClient: HttpClient){}

接下来，定义以下示例方法:

sendGetRequest(){
    this.httpClient.get('https://jsonplaceholder.typicode.com/users').subscribe((res)=>{
        console.log(res);
    });
}

该方法向服务器端点发送GET请求，并订阅返回的可观察对象。

接下来，打开src/app/app.component.ts文件，添加一个按钮来调用sendGetRequest()方法，如下所示:

<button(click)="sendGetRequest()">GET Users</button>

参考文献

  • HttpClientModule
  • Angular 9/10示例教程:REST CRUD api &HTTP获取请求与HttpClient
  • HttpClient

结论

在这篇快速的how-to post中，我们看到了如何在Angular 10中导入HttpClientModule，并使用HttpClient服务向REST API服务器发送一个示例http Ajax GET请求。

本文转载于：http://www.diyabc.com/frontweb/news14787.html

posted @ 2020-08-12 03:54  Dincat  阅读(686)  评论(0)  编辑  收藏  举报