Angular 4 HttpClient查询参数


147

我一直在寻找一种通过new将查询参数传递到API调用中HttpClientModule的方法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 })
}

这将导致对以下URL的API调用:

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

Answers:


231

我最终通过get()功能上的IntelliSense找到了它。因此,我将在这里将其发布给任何正在寻找类似信息的人。

无论如何,语法几乎相同,但略有不同。代替使用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,从条件调用中有条件地添加/删除参数非常简单。Lodash或Underscores或vanilla JS中使用的确切函数可能会因您的应用程序而异,但我发现检查属性定义的效果很好。下面的函数将仅在传递给函数的parameter变量内传递具有相应属性的参数。

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瓶

@joshrathke您能否添加如何一起添加标头和参数?
Savad KP

3
@SavadKP,您可以这样设置它们。http.get(url,{headers:headers,params:params}); 并阅读有关HttpParams之类的新HttpHeaders的信息
Junaid

我猜这new HttpParams({fromObject: { param1: 'value1', ... }});是最简单的方法(角度5+)params.set(...)
Pankaj Prakash

88

在创建HttpParamater时,可以(在版本5+中)使用fromObjectfromString构造函数参数使事情变得简单一些

    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

27
这不再需要。您可以直接将JSON对象传递给HttpClient。const params = {'key': 'value'}至: http.get('/get/url', { params: params })
危险

7
@ danger89是的。但请注意:仅允许使用string或string []值!
何塞·恩里克

节省了大量时间。我通过将查询参数作为字符串附加到请求url来构造url。
Pankaj Prakash

16

你可以这样通过

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

3
没错,但是窗户
外面打来的东西

@DanLatimer您无需使用任何内容,因此您可以一直使用打字,直到将其传递给params
InDieTasten

11

更简洁的解决方案:

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

如果您有一个可以转换为{key: 'stringValue'}对的对象,则可以使用此快捷方式将其转换:

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

我只是喜欢传播语法!


3

joshrathke是正确的。

在angular.io 文档中,已弃用@ angular / http的 URLSearchParams 。相反,您应该使用@ angular / common / http中的HttpParams。该代码非常相似,与joshrathke编写的代码相同。对于例如保存在对象之类的多个参数

{
  firstParam: value1,
  secondParam, value2
}

你也可以

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

如果需要继承的属性,则相应地删除hasOwnProperty。


2

搜索类型的财产URLSearchParamsRequestOptions类角4.已经过时相反,你应该使用PARAMS类型的财产URLSearchParams

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.