Я искал способ передать параметры запроса в вызов API с помощью нового HttpClientModuleHttpClient и еще не нашел решения. Со старым модулем Http вы бы написали что-то вроде этого.

getNamespaceLogs (logNamespace) {

    // Настройка параметра запроса пространства имен журнала
    let params = new URLSearchParams ();
    params.set ('пространство имен журналов', пространство имен журналов);

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

Это приведет к вызову API по следующему URL-адресу:

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

Однако новый метод HttpClient get () не имеет свойства search, поэтому мне интересно, куда передать параметры запроса?

Ответы (8)

В итоге я нашел его через IntelliSense в функции get (). Итак, я отправлю его сюда для всех, кто ищет похожую информацию.

В любом случае, синтаксис почти идентичен, но немного отличается. Вместо использования URLSearchParams () параметры необходимо инициализировать как HttpParams (), а свойство в функции get () теперь называется params. вместо искать.

импорт {HttpClient, HttpParams} из '@ angular / common / http';
getLogs (logNamespace): Observable  {

    // Настройка параметра запроса пространства имен журнала
    let params = new HttpParams (). set ('logNamespace', logNamespace);

    вернуть this._HttpClient.get (`$ {API_URL} / api / v1 / data / logs`, {params: params})
}

На самом деле я предпочитаю этот синтаксис, поскольку он немного больше не зависит от параметров. Я также переработал код, чтобы сделать его немного более сокращенным.

getLogs (logNamespace): Observable  {

    вернуть this._HttpClient.get (`$ {API_URL} / api / v1 / data / logs`, {
        параметры: новый HttpParams (). set ('logNamespace', logNamespace)
    })
}

Несколько параметров

Лучший способ, который я нашел до сих пор, - это определить объект Params со всеми параметрами, которые я хочу определить внутри. Как отметил @estus в комментарии ниже, в Этот вопрос есть много отличных ответов о том, как назначить несколько параметров.

getLogs (параметры) {

    // Инициализируем объект Params
    let params = new HttpParams ();

    // Начинаем присваивать параметры
    params = params.append ('firstParameter', parameters.valueOne);
    params = params.append ('secondParameter', parameters.valueTwo);

    // Выполняем вызов API с использованием новых параметров.
    вернуть this._HttpClient.get (`$ {API_URL} / api / v1 / data / logs`, {params: params})

Несколько параметров с условной логикой

Еще одна вещь, которую я часто делаю с несколькими параметрами, - это возможность использовать несколько параметров, не требуя их присутствия в каждом вызове. Используя Lodash, довольно просто условно добавлять / удалять параметры из вызовов API. Точные функции, используемые в Lodash, Underscores или vanilla JS, могут различаться в зависимости от вашего приложения, но я обнаружил, что проверка определения свойств работает довольно хорошо. Функция ниже будет передавать только те параметры, которые имеют соответствующие свойства в переменной параметров, переданной в функцию.

getLogs (параметры) {

    // Инициализируем объект Params
    let params = new HttpParams ();

    // Начинаем присваивать параметры
    if (! _. isUndefined (параметры)) {
        params = _.isUndefined (parameters.valueOne)? params: params.append ('firstParameter', parameters.valueOne);
        params = _.isUndefined (parameters.valueTwo)? params: params.append ('secondParameter', parameters.valueTwo);
    }

    // Выполняем вызов API с использованием новых параметров.
    вернуть this._HttpClient.get (`$ {API_URL} / api / v1 / data / logs`, {params: params})

Можно передать вот так

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

Более лаконичное решение:

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

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

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

В angular.io docs написано, что 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}});

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

Вы можете (в версии 5+) использовать параметры конструктора fromObject и fromString при создании HttpParamaters, чтобы упростить задачу

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

    // http://localhost:3000/test?param1=value1¶m2=value2

или:

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

    //http://localhost:3000/test?paramvalue1=1¶m2=value2

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

2022 WebDevInsider