J'ai cherché un moyen de passer des paramètres de requête dans un appel d'API avec le nouveau module HttpClientModule
's HttpClient`` et je n'ai pas encore trouvé de solution. Avec l'ancien module
Http`, vous deviez écrire 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 se traduirait par un appel d'API à l'URL suivante :
localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace
Cependant, la nouvelle méthode HttpClient
get()
n'a pas de propriété search
, donc je me demande où passer les paramètres de la requête ?
J'ai fini par le trouver grâce à l'IntelliSense de la fonction get()
. Je vais donc le publier 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 comme HttpParams()
et la propriété dans la fonction get()
s'appelle maintenant 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 elle est un peu plus agnostique au niveau 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 objet Params
avec tous les paramètres que je veux définir à l'intérieur. Comme @estus l'a souligné dans le commentaire ci-dessous, il y a beaucoup d'excellentes réponses dans [This Question] (https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3/45459672#45459672) sur la façon 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 les paramètres multiples est de permettre l'utilisation de plusieurs paramètres sans exiger leur présence dans chaque appel. En utilisant Lodash, il est assez simple d'ajouter/supprimer conditionnellement des paramètres dans les appels à 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 des propriétés fonctionne assez bien. La fonction ci-dessous ne transmettra que les paramètres qui ont des propriétés correspondantes dans la variable paramètres 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 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¶m2=value2
ou :
const params = new HttpParams({
fromString: `param1=${var1}¶m2=${var2}`
});
//http://localhost:3000/test?paramvalue1=1¶m2=value2
joshrathke a raison.
Dans angular.io [docs][1] il est écrit que URLSearchParams from @angular/http is deprecated. A la place, vous devez utiliser HttpParams de @angular/common/http. Le code est assez similaire et identique à celui que joshrathke a écrit. Pour les paramètres multiples qui sont sauvegardés par exemple dans un objet comme
{
firstParam: value1,
secondParam, value2
}
vous pouvez également 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 la propriété hasOwnProperty en conséquence.