4 parametri di query HttpClient angolari

Sono stato alla ricerca di un modo per passare dei parametri delle query in una chiamata API con il nuovo HttpClientModules' HttpCliente devo ancora trovare una soluzione. Con il vecchio Httpmodulo scriverai qualcosa del genere.

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 })
}

Ciò comporterebbe una chiamata API al seguente URL:

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

Tuttavia, il nuovo HttpClient get()metodo non ha una searchproprietà, quindi mi chiedo dove passare i parametri della query?

Ho finito per trovarlo tramite IntelliSense sulla get()funzione. Quindi, lo posterò qui per chiunque sia alla ricerca di informazioni simili.

Comunque, la sintassi è quasi identica, ma leggermente diversa. Invece di utilizzare URLSearchParams()i parametri è necessario inizializzare come HttpParams()e la proprietà all'interno della get()funzione è ora chiamata paramsinvece di 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 })
}

In realtà preferisco questa sintassi perché è un po 'più agnostica di parametro. Ho anche riformulato il codice per renderlo leggermente più abbreviato.

getLogs(logNamespace): Observable<any> {

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

Parametri multipli

Il modo migliore che ho trovato finora è definire un Paramsoggetto con tutti i parametri che voglio definire definiti all'interno. Come ha sottolineato @estus nel commento qui sotto, ci sono molte grandi risposte in questa domanda su come assegnare più parametri.

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 })

Più parametri con logica condizionale

Un'altra cosa che faccio spesso con più parametri è consentire l'uso di più parametri senza richiedere la loro presenza in ogni chiamata. Utilizzando Lodash, è abbastanza semplice aggiungere / rimuovere in modo condizionale i parametri dalle chiamate all'API. Le funzioni esatte utilizzate in Lodash o Underscores o JS vaniglia possono variare a seconda dell'applicazione, ma ho scoperto che il controllo della definizione della proprietà funziona abbastanza bene. La funzione seguente passerà solo i parametri che hanno proprietà corrispondenti all'interno della variabile parametri passata nella funzione.

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 })

Puoi (nella versione 5+) utilizzare i parametri del costruttore fromObject e fromString durante la creazione di HttpParamaters per semplificare un po 'le cose

    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

Puoi passarlo così

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

Una soluzione più concisa:

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

Con Angular 7, ho funzionato usando quanto segue senza usare 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();
  }
}

Se si dispone di un oggetto che può essere convertito in {key: 'stringValue'}coppie, è possibile utilizzare questo collegamento per convertirlo:

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

Adoro la sintassi diffusa!

joshrathke ha ragione.

In angular.io docs è scritto che URLSearchParams da @ angolare / HTTP è deprecato . Invece dovresti usare HttpParams da @ angular / common / http . Il codice è abbastanza simile e identico a quello che joshrathke ha scritto. Per più parametri che vengono salvati ad esempio in un oggetto come

{
  firstParam: value1,
  secondParam, value2
}

potresti anche fare

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

Se hai bisogno di proprietà ereditate, rimuovi hasOwnProperty di conseguenza.

la proprietà di ricerca di tipo URLSearchParams nella classe RequestOptions è obsoleta in angolare 4. Invece, è necessario utilizzare la proprietà params di tipo URLSearchParams .