example - Parámetros de consulta angular 4 HttpClient

httpclient angular 5

Question

He estado buscando una forma de pasar parámetros de consulta a una llamada API con el nuevo HttpClientModule ''s HttpClient y aún no he encontrado una solución. Con el antiguo módulo Http escribirías algo como esto.

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set(''logNamespace'', logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params })
}

Esto resultaría en una llamada API a la siguiente URL:

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

Sin embargo, el nuevo método get() HttpClient no tiene una propiedad de search , por lo que me pregunto dónde pasar los parámetros de consulta.

Answer 1

Pasando múltiples parámetros con URL en Angular 7

  component.ts File --
  --------------------------------------------------------------------------
  export class UnsubscribeComponent implements OnInit {
  email: string;
  token: string;

  constructor(private httpSvc: HttpService) {}


  ngOnInit() {
  this.httpSvc.get(''pin/unsubscribe''+''? 
  email=''+this.email+''&tn=''+this.token).subscribe(res => {
  if (res.status === this.appConstants.ResponseCodes.success) {      
          //Do what you want
    } else {
      //Do what you want
     }
   });
 }

Answer 2

Con Angular 7, lo hice funcionar usando lo siguiente sin usar HttpParams.

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

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log(''res: '', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = ''https://api.example.com/list''

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}

Answer 3

Puede (en la versión 5+) usar los parámetros del constructor fromObject y fromString al crear HttpParamaters para facilitar las cosas

    const params = new HttpParams({
      fromObject: {
        param1: ''value1'',
        param2: ''value2'',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

o:

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2

Answer 4

Puedes pasarlo así

let param: any = {''userId'': 2};
this.http.get(`${ApiUrl}`, {params: param})

Answer 5

Si tiene un objeto que se puede convertir a pares {key: ''stringValue''} , puede usar este acceso directo para convertirlo:

this._Http.get(myUrlString, {params: {...myParamsObject}});

¡Me encanta la sintaxis extendida!

Answer 6

Terminé encontrándolo a través de IntelliSense en la función get() . Por lo tanto, lo publicaré aquí para cualquier persona que esté buscando información similar.

De todos modos, la sintaxis es casi idéntica, pero ligeramente diferente. En lugar de usar URLSearchParams() los parámetros deben inicializarse como HttpParams() y la propiedad dentro de la función get() ahora se llama params lugar de search .

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

getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set(''logNamespace'', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

De hecho, prefiero esta sintaxis ya que es un poco más agnóstico de parámetros. También reescribí el código para hacerlo un poco más abreviado.

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set(''logNamespace'', logNamespace)
    })
}

Parámetros Múltiples

La mejor manera que he encontrado hasta ahora es definir un objeto Params con todos los parámetros que quiero definir definidos dentro. Como @estus señaló en el comentario a continuación, hay muchas respuestas excelentes en esta pregunta sobre cómo asignar múltiples parámetros.

getLogs(parameters) {

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

    // Begin assigning parameters
    params = params.append(''firstParameter'', parameters.valueOne);
    params = params.append(''secondParameter'', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

Parámetros múltiples con lógica condicional

Otra cosa que a menudo hago con múltiples parámetros es permitir el uso de múltiples parámetros sin requerir su presencia en cada llamada. Con Lodash, es bastante simple agregar / eliminar condicionalmente parámetros de llamadas a la API. Las funciones exactas utilizadas en Lodash o Underscores, o vanilla JS pueden variar según su aplicación, pero descubrí que verificar la definición de propiedad funciona bastante bien. La siguiente función solo pasará parámetros que tengan propiedades correspondientes dentro de la variable de parámetros pasada a la función.

getLogs(parameters) {

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

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append(''firstParameter'', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append(''secondParameter'', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

Answer 7

Una solución más concisa:

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })

Answer 8

joshrathke tiene razón.

En angular.io docs está escrito que URLSearchParams de @ angular / http está en desuso . En su lugar, debe usar HttpParams de @ angular / common / http . El código es bastante similar e idéntico a lo que joshrathke ha escrito. Para múltiples parámetros que se guardan, por ejemplo, en un objeto como

{
  firstParam: value1,
  secondParam, value2
}

también podrías hacer

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

Si necesita propiedades heredadas, elimine hasOwnProperty en consecuencia.

Answer 9

la propiedad de búsqueda de tipo URLSearchParams en la clase RequestOptions está en desuso en angular 4. En su lugar, debe usar la propiedad params de tipo URLSearchParams .