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