common - httpclient angular 6 example

Cómo pasar URLSearchParams en el método de "obtención" de HttpClient-Angular 5

Question

Usé Angular 4.2 con el servicio Http y usé el método get como este, donde params es un objeto URLSearchParams:

this.http.get(url, {headers: this.setHeaders(), search: params})

Quiero migrar a Angular 5 . http es ahora un objeto HttpClient como lo recomienda el equipo angular. Recibí un error con la tecla ''buscar''.

¿Sabe cómo migrar el servicio Http a HttpClient en mi caso?

Gracias.

Answer 1

4 vías angulares:

this.http.get(url, {headers: this.setHeaders(), search: params})

Angular 5 vías:

import { HttpClient, HttpParams } from ''@angular/common/http'';
let params = new HttpParams().set(''paramName'', paramValue);
this.http.get(url,  { params: params })

Parámetros múltiples:

// Initialize Params Object
let Params = new HttpParams();

// Begin assigning parameters
Params = Params.append(''firstParameter'', firstVal);
Params = Params.append(''secondParameter'', secondVal);

Answer 2

A continuación se realizarán los cambios, hay que hacer:

• Reemplazar importación Http anterior con:

  importe {HttpClient} desde "@ angular / common / http";

• Cree el objeto HttpClient de la siguiente manera:

  constructor (httpClient protegido: HttpClient,) {}

  Ahora hay formas de lograr el parámetro de búsqueda, a saber:

  public get (searchParam: string): Observable {return this.httpClient.get ( ${this.URL}/${searchParam} ); }

o:

public get(searchParam: string): Observable<object> {
let headers = new Headers({ ''Content-Type'': ''application/json'' });
    let myParams = HttpParams().set("id", searchParam);

    let options = new RequestOptions({ headers: headers, method: ''get'', params: myParams });

return this.http.get("this.url",options)
         .map((res: Response) => res.json())
         .catch(this.handleError);
}

Answer 3

Desde Angular 4.3 puedes usar HttpClient esta manera:

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

   constructor(private httpClient: HttpClient) { }    

   getData(){
        let headers = new HttpHeaders();
        headers  = headers.append(''header-1'', ''value-1'');
        headers  = headers.append(''header-2'', ''value-2'');

       let params = new HttpParams();
       params = params.append(''param-1'', ''value-1'');
       params = params.append(''param-2'', ''value-2'');

       this.httpClient.get("/data", {headers , params })
   }

HttpParams y HttpHeaders son clases inmutables, por lo tanto, después de cada llamada de los métodos set o append , devuelven una nueva instancia, por eso debe hacer esto: params = params.append(...)

Answer 4

Tuve una situación en la que había varios parámetros que debían pasarse a la api. Lo único que funcionó para mí es cuando se llama al método set () en la misma línea encadenada durante la intialización del objeto HttpParams:

public get(userid: string, username: string): Observable<object> {
    let headers = new Headers({ ''Content-Type'': ''application/json'' });
    let myParams = HttpParams().set("id", userid).set("username", username);
    let options = new RequestOptions({ headers: headers, method: ''get'', params: 
myParams });