Paramètres de requête Angular 4 HttpClient

Je cherchais un moyen de transmettre des paramètres de requête dans un appel API avec la nouvelle de HttpClientModulel » HttpClientet il va falloir trouver une solution. Avec l'ancien Httpmodule, vous écririez quelque chose comme ça.

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

Cela entraînerait un appel d'API à l'URL suivante:

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

Cependant, la nouvelle HttpClient get()méthode n'a pas de searchpropriété, donc je me demande où passer les paramètres de requête?

J'ai fini par le trouver via IntelliSense sur la get()fonction. Donc, je le posterai ici pour tous ceux qui recherchent des informations similaires.

Quoi qu'il en soit, la syntaxe est presque identique, mais légèrement différente. Au lieu d'utiliser URLSearchParams()les paramètres doivent être initialisés en tant que HttpParams()et la propriété dans la get()fonction est maintenant appelée à la paramsplace 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 })
}

En fait, je préfère cette syntaxe car elle est un peu plus indépendante des paramètres. J'ai également remanié le code pour le rendre légèrement plus abrégé.

getLogs(logNamespace): Observable<any> {

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

Paramètres multiples

Le meilleur moyen que j'ai trouvé jusqu'à présent est de définir un Paramsobjet avec tous les paramètres que je veux définir définis à l'intérieur. Comme @estus l'a souligné dans le commentaire ci-dessous, cette question contient de nombreuses réponses intéressantes sur la manière d'attribuer plusieurs paramètres.

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

Paramètres multiples avec logique conditionnelle

Une autre chose que je fais souvent avec plusieurs paramètres est d'autoriser l'utilisation de plusieurs paramètres sans exiger leur présence à chaque appel. En utilisant Lodash, il est assez simple d'ajouter / supprimer conditionnellement des paramètres d'appels à l'API. Les fonctions exactes utilisées dans Lodash ou Underscores, ou vanilla JS peuvent varier en fonction de votre application, mais j'ai trouvé que la vérification de la définition de propriété fonctionne plutôt bien. La fonction ci-dessous ne transmettra que les paramètres qui ont des propriétés correspondantes dans la variable de paramètres transmise à la fonction.

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

Vous pouvez (dans la version 5+) utiliser les paramètres du constructeur fromObject et fromString lors de la création de HttpParamaters pour rendre les choses un peu plus faciles

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

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

ou:

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

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

Tu peux le passer comme ça

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

Une solution plus concise:

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

Avec Angular 7, je l'ai fait fonctionner en utilisant ce qui suit sans utiliser 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();
  }
}

Si vous avez un objet qui peut être converti en {key: 'stringValue'}paires, vous pouvez utiliser ce raccourci pour le convertir:

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

J'adore la syntaxe de diffusion!

Joshrathke a raison.

Dans les documents angular.io, il est écrit que URLSearchParams de @ angular / http est obsolète . Au lieu de cela, vous devriez utiliser HttpParams à partir de @ angular / common / http . Le code est assez similaire et identique à ce que joshrathke a écrit. Pour plusieurs paramètres qui sont enregistrés par exemple dans un objet comme

{
  firstParam: value1,
  secondParam, value2
}

tu pourrais aussi faire

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

Si vous avez besoin de propriétés héritées, supprimez le hasOwnProperty en conséquence.

La propriété de recherche de type URLSearchParams dans la classe RequestOptions est obsolète dans angular 4. À la place, vous devez utiliser la propriété params de type URLSearchParams .