Angular 4 HttpClient Abfrageparameter

Question

Ich habe nach einer Möglichkeit gesucht, Abfrageparameter in einen API-Aufruf mit der neuen HttpClientModuleHttpClient übergeben und noch eine Lösung zu finden. Mit dem alten Http Modul würden Sie so etwas schreiben.

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

Dies würde in einem API-Aufruf der folgenden URL zur Folge haben:

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

jedoch die neue HttpClientget() Methode kein search Eigenschaft hat, so frage ich mich, wo passieren in den Abfrageparametern?

Answer 1

Ich fand es durch die Intellisense über die get() Funktion. Ich muss Intellisense lieben. Ich poste es hier für jeden, der nach ähnlichen Informationen sucht.

Anyways die Syntax ist fast identisch, aber etwas anders. Anstatt URLSearchParams() zu verwenden, müssen die Parameter als HttpParams() initialisiert werden und die Eigenschaft innerhalb der get()-Funktion heißt jetzt params anstelle von 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 }) 
} 

ich eigentlich lieber diese Syntax als ein wenig mehr Parameter Agnostiker. Ich habe den Code auch umstrukturiert, um ihn etwas gekürzter zu machen.

getLogs(logNamespace): Observable<any> { 

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

Mehrere Parameter

mir klar, wie viel muss ich oft mehrere Parameter in eine Abfrage übergeben, so dachte ich, ich einen Abschnitt über, wie das auch zu tun hinzufügen würde. Der beste Weg, den ich bisher gefunden habe, ist ein Params Objekt mit allen Parametern zu definieren, die ich definieren möchte. Als Estus im Kommentar unten hingewiesen, gibt es eine Menge guter Antworten in This Question, wie Sie mehrere Parameter zuweisen.

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

Mehrere Parameter mit Conditional Logic

Eine andere Sache, die ich oft mit mehreren Parametern zu tun ist die Verwendung mehrerer Parameter ermöglichen, ohne ihre Anwesenheit in jedem Gespräch zu erfordern. Mit Lodash ist es ziemlich einfach, Parameter aus Aufrufen der API bedingt hinzuzufügen/zu entfernen. Die genauen Funktionen, die in Lodash oder Unterstrichen oder Vanilla JS verwendet werden, können je nach Anwendung variieren, aber ich habe festgestellt, dass das Überprüfen der Eigenschaftsdefinition ziemlich gut funktioniert. Die folgende Funktion übergibt nur Parameter mit entsprechenden Eigenschaften innerhalb der an die Funktion übergebenen Parametervariablen.

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

joshrathke ist richtig.

In angular.io docs wird geschrieben, dass URLSearchParams von @ angular/http ist veraltet. Stattdessen sollten Sie HttpParams von @ angular/common/http verwenden. Der Code ist ziemlich ähnlich und identisch mit dem, was Joshrathke geschrieben hat. Für mehrere Parameter, die zum Beispiel in einem Objekt wie

{ 
    firstParam: value1, 
    secondParam, value2 
} 

gerettet werden könnten Sie auch tun

for(let property in objectStoresParams) { 
    if(objectStoresParams.hasOwnProperty(property) { 
    params = params.append(property, objectStoresParams[property]); 
    } 
} 

Wenn Sie vererbte Eigenschaften müssen dann entsprechend den hasOwnProperty entfernen.

Answer 3

Sie können (in der Version 5 +) verwenden, um die Fromobject und vonString Parameter Konstruktor, wenn HttpParamaters Erstellen Dinge ein wenig einfacher

const params = new HttpParams({ 
     fromObject: { 
     param1: 'value1', 
     param2: 'value2', 
     } 
    }); 

    // http://localhost:3000/test?param1=value1&param2=value2 

oder zu machen:

const params = new HttpParams({ 
     fromString: `param1=${var1}&param2=${var2}` 
    }); 

    //http://localhost:3000/test?paramvalue1=1&param2=value2 

Answer 4

Suche Objekt des Typs URLSearchParams in RequestOptions Klasse ist veraltet in eckigen 4. Stattdessen sollten Sie params Eigenschaft des Typs URLSearchParams verwenden.