Параметры запроса Angular 4 HttpClient


157

Я искал способ , чтобы передать параметры запроса в 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свойства, поэтому мне интересно, куда передать параметры запроса?


2
С Angular 7 вы можете написать свои параметры как объект и использовать его следующим образом: this.httpClient.get(url, { params } Посмотрите stackoverflow.com/a/54211610/5042169
Jun711,

Ответы:


239

В итоге я нашел его через 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 })

6
Первый фрагмент неверен. let params = new HttpParams(); params.set(...)не будет работать должным образом. См. Stackoverflow.com/questions/45459532/…
Estus Flask

@joshrathke Не могли бы вы добавить, как добавить заголовок и параметры вместе?
Savad KP

3
@SavadKP, вы можете установить их так: http.get (url, {headers: headers, params: params}); и прочитать о новых HttpHeaders как HTTPParams
Junaid

Я думаю, new HttpParams({fromObject: { param1: 'value1', ... }});это самый простой подход (angular 5+) params.set(...).
Панкадж Пракаш

89

Вы можете (в версии 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

28
Это больше не нужно. Вы можете просто передать объект JSON напрямую HttpClient. const params = {'key': 'value'}http.get('/get/url', { params: params })
кому

7
@ dangerous89 Верно. Но будьте осторожны: разрешены только строковые или строковые [] значения!
Хосе Энрике

Сэкономил огромное количество времени. Я создавал URL-адрес, добавляя параметры запроса в виде строки к URL-адресу запроса.
Панкадж Пракаш

18

Вы можете передать это так

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

3
Верно, но печатать из-за этого просто
невозможно

1
@DanLatimer Вам не нужно ничего использовать, поэтому вы можете продолжать вводить текст до тех пор, пока не передадите егоparams
InDieTasten

12

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

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

6

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

4

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

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


4

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

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

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


2

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.