Paramètres de requête angulaires 4 HttpClient

Question

J'ai été à la recherche d'un moyen de transmettre une requête paramétrée dans un appel d'API avec le nouveau HttpClientModules' HttpClient et n'ont pas encore trouver une solution. Avec le vieux - Http module vous pouvez écrire quelque chose comme cela.

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

Il en résultera un appel d'API à l'adresse URL suivante:

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

Toutefois, la nouvelle - HttpClient get() méthode n'a pas un search de la propriété, alors je me demande où il faut passer dans les paramètres de la requête?

Answer 1

J'ai fini par trouver par le biais de l'IntelliSense sur l' get() fonction. Donc, je vais le poster ici pour quiconque est à la recherche pour obtenir des informations similaires.

De toute façon, la syntaxe est presque identique, mais un peu différente. Au lieu d'utiliser URLSearchParams() les paramètres doivent être initialisé en HttpParams() et de la propriété au sein de l' get() fonction est maintenant appelé 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 })
}

Je préfère cette syntaxe comme sa un peu plus le paramètre agnostique. J'ai aussi refait le code pour le rendre un peu plus abrégée.

getLogs(logNamespace): Observable<any> {

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

Plusieurs Paramètres

Le meilleur moyen que j'ai trouvé jusqu'à présent est de définir un Params objet avec tous les paramètres que je veux définir définie à l'intérieur. Comme @estus souligné dans le commentaire ci-dessous, il y a beaucoup de réponses à Cette Question de comment faire pour affecter 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 })

Plusieurs Paramètres à la fois la Logique Conditionnelle

Une autre chose que je fais souvent avec plusieurs paramètres permettent l'utilisation de plusieurs paramètres, sans exiger de leur présence lors de chaque appel. À l'aide de Lodash, c'est assez simple à conditionnellement ajouter/supprimer des paramètres d'appels à l'API. Les fonctions exactes utilisées dans Lodash ou des traits de Soulignement, ou de la vanille JS peut varier en fonction de votre application, mais j'ai trouvé que la vérification de définition de propriété fonctionne assez bien. La fonction ci-dessous transmettre uniquement les paramètres qui possèdent des propriétés correspondantes dans les paramètres de la variable 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 })

Answer 2

Vous pouvez (dans la version 5+) utiliser les paramètres de 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
 

Answer 3

Vous pouvez le passer comme ça

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

Answer 4

Une solution plus concise:

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

Answer 5

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