Angular 4 HttpClient Paramètres de requête

Je cherchais un moyen de transmettre les parameters de requête à un appel API avec le nouveau HttpClientModule de HttpClient et HttpClient n’ai pas encore trouvé de solution. Avec l’ancien module Http vous écrivez 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 se traduirait par un appel d’API à l’URL suivante:

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

Cependant, la nouvelle HttpClient get() HttpClient n’a pas de propriété de search , alors je me demande où passer les parameters de requête?

J’ai fini par le trouver grâce à l’intellisense sur la fonction get() . Je dois aimer IntelliSense. Je vais donc le poster ici pour toute personne qui recherche des informations similaires.

La syntaxe est presque identique, mais légèrement différente. Au lieu d’utiliser URLSearchParams() les parameters doivent être initialisés en tant que HttpParams() et la propriété de la fonction get() s’appelle désormais params au lieu de search .

 import { HttpClient, HttpParams } from '@angular/common/http'; 
 getLogs(logNamespace): Observable { // Setup log namespace query parameter let params = new HttpParams().set('logNamespace', logNamespace); return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params }) } 

Je préfère en fait cette syntaxe comme un paramètre un peu plus agnostique. J’ai également refait le code pour le rendre légèrement plus abrégé.

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

Paramètres multiples

J’ai réalisé à quel point je devais souvent passer plusieurs parameters dans une requête, alors je me suis dit que j’appendais une section sur la manière de procéder. Le meilleur moyen que j’ai trouvé jusqu’à présent est de définir un object Params avec tous les parameters que je veux définir définis à l’intérieur. Comme le souligne Estus dans le commentaire ci-dessous, il y a beaucoup de bonnes réponses dans cette question sur la manière d’atsortingbuer plusieurs parameters.

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

Plusieurs parameters avec une logique conditionnelle

Une autre chose que je fais souvent avec plusieurs parameters est de permettre l’utilisation de plusieurs parameters sans exiger leur présence dans chaque appel. En utilisant Lodash, il est très simple d’append ou de supprimer de façon conditionnelle des parameters des appels à l’API. Les fonctions exactes utilisées dans Lodash, Underscores ou JS vanilla peuvent varier en fonction de votre application, mais j’ai constaté que la vérification de la définition des propriétés fonctionnait plutôt bien. La fonction ci-dessous ne transmettra que des parameters ayant des propriétés correspondantes dans la variable parameters passée dans 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 parameters du constructeur fromObject et fromSsortingng lors de la création de HttpParamaters pour faciliter les choses

  const params = new HttpParams({ fromObject: { param1: 'value1', param2: 'value2', } }); // http://localhost:3000/test?param1=value1&param2=value2 

ou:

  const params = new HttpParams({ fromSsortingng: `param1=${var1}&param2=${var2}` }); //http://localhost:3000/test?paramvalue1=1&param2=value2 

Une solution plus concise:

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

Vous pouvez le passer comme ça

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

Joshrathke a raison.

Dans angular.io docs est écrit que URLSearchParams de @ angular / http est obsolète . Au lieu de cela, vous devez utiliser HttpParams à partir de @ angular / common / http . Le code est très similaire et identique à ce que joshrathke a écrit. Pour plusieurs parameters enregistrés par exemple dans un object 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 hasOwnProperty en conséquence.

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

Si vous avez un object pouvant être converti en paires {key: 'ssortingngValue'} , vous pouvez utiliser ce raccourci pour le convertir:

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

J’adore la syntaxe de diffusion!