web-dev-qa-db-fra.com

Angular 4 Paramètres de requête HttpClient

Je cherchais un moyen de passer des paramètres de requête dans un appel d'API avec le nouveau HttpClientModule's HttpClient et je n'ai pas encore trouvé de solution. Avec l'ancien module Http, vous écririez quelque chose comme ceci.

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 méthode HttpClientget() ne possède pas de propriété search, aussi je me demande où passer les paramètres de la requête?

angularhttptypescripthttpclientlodash
118
joshrathke

J'ai fini par le trouver via IntelliSense dans la fonction get(). Donc, je vais le poster ici pour quiconque cherche 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 sous la forme 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<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 son paramètre est un peu plus agnostique. J'ai également refactoré 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 consiste à définir un objet Params avec tous les paramètres que je souhaite définir définis dans. Comme @estus l'a souligné dans le commentaire ci-dessous, il existe de nombreuses bonnes réponses dans This Question sur la manière d'assigner 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 de permettre l'utilisation de plusieurs paramètres sans exiger leur présence à chaque appel. Avec Lodash, il est assez simple d’ajouter/supprimer conditionnellement des paramètres aux appels de l’API. Les fonctions exactes utilisées dans Lodash, Underscores ou Vanilla JS peuvent varier en fonction de votre application, mais j'ai constaté que la vérification de la définition de la propriété fonctionnait plutôt bien. La fonction ci-dessous ne transmettra que les paramètres ayant les 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 })
184
joshrathke

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

    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
78
JayChase

Vous pouvez le passer comme ça

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

Une solution plus concise:

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

Avec Angular 7, je l’ai obtenu 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();
  }
}
4
Jun711

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

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

J'adore la syntaxe répandue!

3
Jeremy Moritz

joshrathke a raison.

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

{
  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.

2
Sven

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

2
sanket patel

Passage de plusieurs paramètres avec l'URL dans 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
     }
   });
 }
0
Rahul Seth