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

Ответ 1

В итоге я нашел его с помощью 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 или 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 })

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

joshrathke прав.

В 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.

Ответ 8

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

Ответ 9

Передача нескольких параметров с URL в Angular 7

  component.ts File --
  --------------------------------------------------------------------------
  export class UnsubscribeComponent implements OnInit {
  email: string;
  token: string;

  constructor(private httpSvc: HttpService) {}


  ngOnInit() {
  this.httpSvc.get('pin/unsubscribe'+'? 
  email='+this.email+'&tn='+this.token).subscribe(res => {
  if (res.status === this.appConstants.ResponseCodes.success) {      
          //Do what you want
    } else {
      //Do what you want
     }
   });
 }