Параметры запроса Angular 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()параметров необходимо инициализировать as, 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 или vanilla 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();
  }
}

Джошратке прав.

В документах 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.

Если у вас есть объект, который можно преобразовать в {key: 'stringValue'}пары, вы можете использовать этот ярлык для его преобразования:

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

Мне просто нравится синтаксис распространения!

Свойство search типа URLSearchParams в классе RequestOptions устарело в angular 4. Вместо этого вы должны использовать свойство params типа URLSearchParams .