Кутові параметри запиту 4 HttpClient

Я шукав спосіб , щоб передати параметри запиту в API виклику з новим HttpClientModule«s HttpClientі ще належить знайти рішення. Зі старим Httpмодулем ви б написали щось подібне.

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

Це призведе до виклику API на таку URL-адресу:

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

Однак у нового HttpClient get()методу немає searchвластивості, тому мені цікаво, куди потрібно передати параметри запиту?

Я знайшов це через функцію IntelliSense на get()функції. Тож я опублікую його тут для всіх, хто шукає подібну інформацію.

У будь-якому випадку синтаксис майже однаковий, але дещо інший. Замість використання URLSearchParams()параметрів потрібно ініціалізувати як, HttpParams()а властивість у межах get()функції тепер викликається paramsзамість 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 })
}

Я фактично віддаю перевагу цьому синтаксису як його трохи більш агресивному параметру. Я також відновив код, щоб зробити його трохи більш скороченим.

getLogs(logNamespace): Observable<any> {

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

Кілька параметрів

Найкращий спосіб, який я до цього часу знайшов, - це визначити Paramsоб'єкт з усіма параметрами, які я хочу визначити, визначеними всередині. Як @estus зазначив у коментарі нижче, у цьому запитанні є багато чудових відповідей щодо того, як призначити кілька параметрів.

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

Кілька параметрів з умовною логікою

Інша річ, яку я часто роблю з кількома параметрами, - це дозволити використання декількох параметрів, не вимагаючи їх присутності в кожному дзвінку. За допомогою Lodash досить просто умовно додавати / видаляти параметри з викликів до API. Точні функції, які використовуються в Lodash або Underscores або ванільній JS, можуть залежати від вашої програми, але я виявив, що перевірка визначення властивості працює досить добре. Функція нижче передасть лише параметри, які мають відповідні властивості в межах змінної параметрів, переданих у функцію.

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

Ви можете (у версії 5+) використовувати параметри конструктора fromObject і fromString при створенні HttpParamaters, щоб зробити речі трохи простішими

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

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

або:

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

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

Ви можете передати це так

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

Більш стисле рішення:

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

З Angular 7 я змусив його працювати, використовуючи наступні, не використовуючи 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();
  }
}

Якщо у вас є об'єкт, який можна перетворити в {key: 'stringValue'}пари, ви можете скористатися цим ярликом для його перетворення:

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

Я просто люблю синтаксис поширення!

Джошратке має рацію.

У документах angular.io написано, що URLSearchParams з @ angular / http застарілий . Натомість слід використовувати HttpParams з @ angular / common / http . Код досить подібний і ідентичний тому, що написали joshrathke. Для декількох параметрів, які зберігаються, наприклад, у подібному об'єкті

{
  firstParam: value1,
  secondParam, value2
}

ви також можете зробити

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

Якщо вам потрібні успадковані властивості, відповідно видаліть hasOwnProperty.

властивість пошуку типу URLSearchParams у класі RequestOptions застаріла у куті 4. Натомість слід використовувати властивість params типу URLSearchParams .