Angular Basics:Jak používat HttpClient v Angular

Pojďme se podívat na to, co je HttpClient a jak jej používat v Angular, včetně kontroly požadavků HTTP GET, POST, PUT a DELETE a RxJS pozorovatelných.

V tomto článku se dozvíme o HttpClient a jak jej můžeme použít v Angular. Následují témata, kterými se budeme zabývat:

  • Proč potřebujeme HttpClient?
  • Funkce HttpClient
  • Co je pozorovatelný RxJS?
  • Jak používat HttpClient v Angular?

Proč potřebujeme HttpClient?

Front-end aplikací komunikuje s back-end službami za účelem získání nebo odeslání dat přes protokol HTTP pomocí buď XMLHttpRequest rozhraní nebo fetch API . Tato komunikace se provádí v Angular pomocí HttpClient .

Co je HttpClient?

HttpClient je vestavěná třída služeb dostupná v @angular/common/http balík. Pro každý požadavek má několik typů podpisu a návratnosti. Využívá rozhraní API založená na RxJS, což znamená, že vrací pozorovatelné a to, co potřebujeme k předplacení. Toto API bylo vyvinuto na základě XMLHttpRequest rozhraní vystavené prohlížeči.

Funkce HttpClient

  • Poskytuje zadané objekty požadavků a odpovědí
  • Obsahuje funkce testovatelnosti
  • Zachycuje požadavek a odpověď
  • Podporuje rozhraní API založená na pozorování RxJS
  • Podporuje zjednodušené zpracování chyb
  • Provádí operace GET, POST, PUT, DELETE

Co je pozorovatelný RxJS?

Pozorovatelný je jedinečný objekt podobný Promise a pomáhá spravovat asynchronní kód. Nepochází z jazyka JavaScript, takže k jeho použití potřebujeme nejoblíbenější pozorovatelnou knihovnu, nazvanou RxJS (Reactive Extension for JavaScript). RxJS je knihovna pro reaktivní programování pomocí pozorovatelných prvků, která usnadňuje sestavení asynchronního kódu nebo kódu založeného na zpětném volání. Angular používá observables jako rozhraní ke zpracování běžných asynchronních operací.

Používání služeb
v Angular

Navštivte tyto články a zjistěte, proč a jak používat Angular Services pro vkládání závislostí.

Níže jsou uvedeny body, které je třeba vzít v úvahu, když používáme HttpClient a vrací pozorovatelné:

  • Když jsme subscribe , zahájí požadavek, jinak se nic nestane.
  • Když je get() požadavek se vrátí úspěšně, pozorovatelný objekt vydá výsledek a je dokončen.
  • Když je get() požadavek selže, pozorovatelné vyšle chybu.

Jak používat HttpClient v Angular?

Podívejme se, jak používat tento modul HttpClient v aplikaci Angular. Tento modul je již součástí aplikace, když vytváříme aplikaci v Angular. Chcete-li jej použít, postupujte podle následujících kroků:

Krok 1: Aplikaci jsem vytvořil pomocí angular-cli příkazu ng new app-name . Pokud jste v Angularu nováčkem, podívejte se sem, jak nastavit aplikaci.

Krok 2: Importujte nebo nakonfigurujte HttpClientModule do app.module.ts soubor, jak je uvedeno níže:

import { NgModule } from  '@angular/core';
import { BrowserModule } from  '@angular/platform-browser';
import { AppRoutingModule } from  './app-routing.module';
import { AppComponent } from  './app.component';
import { HttpClientModule } from  '@angular/common/http';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule  //imported the module
],
providers: [],
bootstrap: [AppComponent]
})
export  class  AppModule { }

Krok 3: Můžete přímo použít HttpClient ve vaší komponentě, ale je nejlepší k němu přistupovat prostřednictvím služby. Vytváříme novou službu pomocí příkazu angular-cli ng generate service service-name . V této službě uvidíte kód, jak je uvedeno níže:

import { Injectable } from  '@angular/core';

@Injectable({
providedIn:  'root'
})
export class HttpService {

constructor() { }

}

Krok 4: Vložte HttpClient ve službě vytvořené v předchozím kroku. Poté můžete vidět kód jako níže:

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

@Injectable({
providedIn:  'root'
})
export class HttpService {

constructor(private http: HttpClient) { }

}

Krok 5: V tomto kroku načteme data ze serveru pomocí požadavku HTTP GET. Za tímto účelem jsme do názvu služby přidali jednu metodu jako getPosts —tato metoda, kterou voláme v komponentě.

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

@Injectable({
providedIn:  'root'
})

export class HttpService {

private url = 'https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/posts';

constructor(private http: HttpClient) { }

getPosts() {
	return this.http.get(this.url);
}
}

Do výše uvedeného kódu jsme přidali metodu getPosts a umístil požadavek HTTP GET a předal jeden parametr s požadavkem, který není nic jiného než End-point-url . Vždy je nejlepším postupem uchovávat konstanty v samostatném souboru a přistupovat k nim odtud – je snadné je sdílet a odkazovat na ně pro úpravy, když je k dispozici jediné místo, které odráží, kde se používají.

Krok 6: Pojďme pochopit HTTP GET požadavek a jeho objekty požadavku a odpovědi. Požadavek HTTP GET má přibližně 15 různých typů metod, které lze použít.

get<T>(url: string, options?: { headers?: [HttpHeaders]; 
context?: [HttpContext]; 
observe?: "body"; 
params?:  [HttpParams]; 
reportProgress?: boolean; 
responseType?:  "json"; 
withCredentials?: boolean; 
}):  Observable<T>

Parametry

  • url – Je to adresa URL koncového bodu služby/API typu string .
  • options – Používá se ke konfiguraci požadavku HTTP. Je volitelný a má typ object a jeho výchozí hodnota je undefined .
options: 
{ 
	headers?: [HttpHeaders],
	observe?: 'body' | 'events' | 'response',  
	params?:  [HttpParams],
	reportProgress?:  boolean, 
	responseType?: 'arraybuffer'|'blob'|'json'|'text', 
	withCredentials?:  boolean,  
}

Níže dvě jsou důležité options vlastnosti:

  • observe :Kolik odezvy se má vrátit.
  • responseType :Formát vrácených dat.

Vrácení
HTTP GET vrací pozorovatelnou hodnotu HttpResponse .

Krok 7: V tomto kroku použijeme getPosts metoda v komponentě. Za tímto účelem nejprve musíme vložit vytvořenou službu do naší komponenty a přistupovat k metodě, jak je uvedeno níže:

import { Component } from '@angular/core';
import { HttpService } from './http.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export  class  AppComponent {
title = 'Article by Jeetendra';
posts : any;
constructor(private httpService: HttpService) { }

ngOnInit() {
	this.httpService.getPosts().subscribe(
	(response) => { this.posts = response; },
	(error) => { console.log(error); });
}

}

Ve výše uvedeném kódu jsme službu vložili nejprve do konstruktoru, pak je důležité zavolat getPosts metoda a subscribe k tomu. Kdykoli dostaneme odpověď z tohoto subscribe metodou, bude to seznam objektů obsahujících id , title , path , jak je uvedeno níže:

Odpověď

[
	{id:  1,  title:  "Angular Localization Using ngx-translate",  path:  "https://www.telerik.com/blogs/angular-localization-using-ngx-translate"},
	{id:  2,  title:  "How to Use the Navigation or Shadow Property in Entity Framework Core",  path:  "https://www.telerik.com/blogs/how-to-use-the-navigation-or-shadow-property-in-entity-framework-core"},
	{id:  3,  title:  "Getting Value from appsettings.json in .NET Core",  path:  "https://www.telerik.com/blogs/how-to-get-values-from-appsettings-json-in-net-core"},
	{id:  4,  title:  "Embedding Beautiful Reporting into Your ASP.NET MVC Applications",  path:  "https://www.telerik.com/blogs/embedding-beautiful-reporting-asp-net-mvc-applications"},
	{id:  5,  title:  "Select Tag Helper in ASP.NET Core MVC",  path:  "https://www.telerik.com/blogs/select-tag-helper-asp-net-core-mvc"}
]

Vlastnost jsme deklarovali jako posts a přiřadil odpověď, kterou dostaneme v subscribe , pak to iterovali v HTML pomocí *ngFor jak ukazuje kód níže:

<div>
<li *ngFor="let post of posts">
     <a  href="{{post.path}}">  
         <span  style="font-size: 20px;text-align: center;">{{post.title}}                 
          </span>
    </a>
</li>
</div>

Krok 8: Nakonec jsme implementovali náš první HTTP požadavek, GET . Spusťte aplikaci Angular pomocí příkazu angular-cli ng serve a dostanete zprávu jako:„Angular Live Development Server naslouchá na localhost:4200. Otevřete svůj prohlížeč na adrese http://localhost:4200/." Jakmile otevřete adresu URL ve svém prohlížeči, získáte výstup jako na obrázku níže.

Výstup

Ve výše uvedeném výstupu uvidíte seznam mnou napsaných příspěvků.

Příklad:požadavek HTTP GET s možnostmi parametr.

Požadavek HTTP

this.http.get(this.url, { observe: 'response' });

Odpověď HTTP

HttpResponse
body:  (5) [{…},  {…},  {…},  {…},  {…}]
headers: HttpHeaders {normalizedNames:  Map(0),  lazyUpdate:  null,  lazyInit:  ƒ}
ok:  true
status:  200
statusText:  "OK"
type:  4
url:  "https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/posts"
__proto__:  HttpResponseBase

Požadavek HTTP POST

Tento požadavek se používá k odeslání dat z aplikace na server pomocí níže uvedeného podpisu:

post(url: string, body: any, options: { headers?: [HttpHeaders]; 
context?: [HttpContext]; 
observe?: "body"; 
params?: [HttpParams]; 
reportProgress?: boolean; 
responseType: "text"; 
withCredentials?: boolean;  }):  Observable<string>

Parametry

  • url:Adresa URL koncové služby typu string .
  • body:Obsah, který má být odeslán nebo nahrazen, typu any .
  • Možnosti:Možnosti HTTP typu object .

Vrácení
HTTP POST vrací pozorovatelnou odpověď typu string .

Příklad

const configUrl= 'http://localhost:3000/users';
const params = new HttpParams({
fromObject: { Name : 'name',
Email : 'email',
Role : 'role',
Status : 'Inactive',
MobileNumber : 1234567890
}
});

var headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});

//the HTTP post request
return  this.http.post(configUrl, params, { headers });

Požadavek HTTP PUT

Tento požadavek se používá k odeslání dat z aplikace na server k aktualizaci pomocí níže uvedeného podpisu:

put(url: string, body: any, options: { headers?: [HttpHeaders]; 
context?: [HttpContext]; 
observe?: "body"; 
params?: [HttpParams]; 
reportProgress?: boolean; 
responseType: "text"; 
withCredentials?: boolean;  }):  Observable<string>

Parametry

  • url:Adresa URL koncové služby typu string .
  • body:Obsah, který se má přidat nebo aktualizovat, typu any .
  • Možnosti:Možnosti HTTP typu object .

Vrácení
HTTP PUT vrací pozorovatelnou odpověď typu string .

Příklad

const configUrl= 'http://localhost:3000/users';
const params = new HttpParams({
fromObject: { Name : 'name',
Email : 'email',
Role : 'role',
Status : 'Inactive',
MobileNumber : 1234567890
_id : 1
}
});

var headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});

//the HTTP put request
return  this.http.put(configUrl, params, { headers });

Požadavek HTTP DELETE

Tento požadavek se používá k odstranění dat na základě parametru pomocí níže uvedeného podpisu:

delete(url: string, options: { headers?: [HttpHeaders]; 
context?: [HttpContext]; 
observe?: "body"; 
params?: [HttpParams]; 
reportProgress?: boolean; 
responseType: "text"; 
withCredentials?: boolean;  }):  Observable<string>

Parametry

  • url:Adresa URL koncové služby typu string .
  • Možnosti:Možnosti HTTP typu object .

Vrácení
HTTP DELETE vrací pozorovatelnou odpověď typu string .

Příklad

const configUrl= 'http://localhost:3000/user';

//the HTTP delete request
return  this.http.delete(configUrl + '/' + id);

Příklad si můžete stáhnout zde.

Závěr

V tomto článku jsme diskutovali o tom, co je HttpClient, funkce a jak použít a umístit požadavek na server v Angular. Pokud máte nějaké návrhy nebo dotazy týkající se tohoto článku, zanechte prosím komentář nebo mě kontaktujte pomocí odkazů v mém profilu.

"Nauč se to. Sdílejte to.“