Paramètres de requête Angular 4 HttpClient


147

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?


2
Avec Angular 7, vous pouvez écrire vos paramètres en tant qu'objet et l'utiliser comme ceci: this.httpClient.get(url, { params } Consultez stackoverflow.com/a/54211610/5042169
Jun711

Réponses:


231

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

6
Le premier extrait est faux. let params = new HttpParams(); params.set(...)ne fonctionnera pas comme prévu. Voir stackoverflow.com/questions/45459532/…
Estus Flask

@joshrathke Pourriez-vous s'il vous plaît ajouter comment ajouter l'en-tête et les paramètres ensemble?
Savad KP

3
@SavadKP vous pouvez les définir comme ceci: http://www.http.get (url, {headers: headers, params: params}); et en savoir plus sur les nouveaux HttpHeaders comme HttpParams
Junaid

Je suppose que new HttpParams({fromObject: { param1: 'value1', ... }});c'est l'approche la plus simple (angulaire 5+) alors params.set(...).
Pankaj Prakash

88

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

27
Ce n'est plus nécessaire. Vous pouvez simplement passer directement un objet JSON à HttpClient. const params = {'key': 'value'}à: http.get('/get/url', { params: params })
danger89

7
@ danger89 Vrai. Mais attention: seules les valeurs string ou string [] sont autorisées!
Jose Enrique

J'ai économisé énormément de temps. Je construisais l'URL en ajoutant des paramètres de requête sous forme de chaîne à l'URL de la requête.
Pankaj Prakash

16

Tu peux le passer comme ça

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

3
C'est vrai, mais cela jette la frappe par la fenêtre
DanLatimer

@DanLatimer Vous n'avez pas besoin d'en utiliser, vous pouvez donc continuer à utiliser la saisie jusqu'à ce que vous la transmettiez àparams
InDieTasten

11

Une solution plus concise:

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

6

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

4

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!


3

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.


2

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 .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.