Açısal 4 HttpClient Sorgu Parametreleri

Ben yeni bir API çağrısı içine sorgu parametreleri aktarmak için bir yol arıyoruz edilmiştir HttpClientModule'ın HttpClientve bir çözüm bulmak için henüz. Eski Httpmodül ile böyle bir şey yazarsınız.

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

Bu, aşağıdaki URL'ye bir API çağrısı ile sonuçlanır:

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

Ancak, yeni HttpClient get()yöntem bir searchözelliği yok, bu yüzden nerede sorgu parametrelerini geçmek için merak ediyorum?

Bu get()işlevi IntelliSense aracılığıyla buldum . Yani, benzer bilgileri arayan herkes için buraya göndereceğim.

Her neyse, sözdizimi neredeyse aynı, ancak biraz farklı. URLSearchParams()Parametreleri kullanmak yerine olarak başlatılması gerekir HttpParams()ve get()şimdi işlev içindeki özellik paramsyerine çağrılır 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 })
}

Aslında bu sözdizimini biraz daha agnostik olarak tercih ediyorum. Ayrıca kodu biraz daha kısaltmak için yeniden düzenledim.

getLogs(logNamespace): Observable<any> {

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

Çoklu Parametreler

Şimdiye kadar bulduğum en iyi yol, içinde tanımlamak Paramsistediğim tüm parametreleri içeren bir nesne tanımlamaktır. @Estus aşağıda açıklamada belirttiği gibi, büyük cevapların bir yeri vardır Bu Soru birden çok parametre atamak için nasıl olarak.

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

Koşullu Mantık ile Çoklu Parametreler

Sıklıkla birden fazla parametre ile yaptığım başka bir şey, her çağrıda varlıklarını gerektirmeden birden fazla parametrenin kullanımına izin vermektir. Lodash kullanarak, API çağrılarına koşullu olarak parametre eklemek / kaldırmak için oldukça basittir. Lodash veya Undercores veya vanilya JS'de kullanılan tam işlevler uygulamanıza bağlı olarak değişebilir, ancak özellik tanımını kontrol etmenin oldukça iyi çalıştığını gördüm. Aşağıdaki işlev yalnızca işleve iletilen parametreler değişkeni içinde karşılık gelen özelliklere sahip parametreleri iletir.

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

HttpParamaters oluştururken işleri biraz daha kolaylaştırmak için fromObject ve fromString yapıcı parametrelerini kullanabilirsiniz (sürüm 5+)

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

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

veya:

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

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

Bu şekilde geçebilirsin

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

Daha özlü bir çözüm:

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

Angular 7 ile, HttpParams kullanmadan aşağıdakileri kullanarak çalıştım.

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

{key: 'stringValue'}Çiftlere dönüştürülebilen bir nesneniz varsa, dönüştürmek için bu kısayolu kullanabilirsiniz:

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

Ben sadece forma sözdizimini seviyorum!

Joshrathke haklı.

Angular.io yılında docs yazılıdır @ açısal / http URLSearchParams kullanımdan kaldırıldı . Bunun yerine @ angular / common / http adresinden HttpParams kullanmalısınız . Kod, joshrathke'nin yazdıklarıyla oldukça benzer ve aynıdır. Örneğin aşağıdaki gibi bir nesneye kaydedilen birden çok parametre için

{
  firstParam: value1,
  secondParam, value2
}

sende yapabilirsin

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

Devralınan özelliklere ihtiyacınız varsa, hasOwnProperty öğesini uygun şekilde kaldırın.

arama tipi özelliğini URLSearchParams içinde RequestOptions sınıfında Bunun yerine, kullanmalısınız açısal 4. önerilmiyor parametreler tipi özelliğini URLSearchParams .