Angular 4 HttpClient 查询参数

Posted 2023-03-13

【中文标题】Angular 4 HttpClient 查询参数

【英文标题】：Angular 4 HttpClient Query Parameters

【发布时间】：2018-01-10 06:05:40

【问题描述】：

我一直在寻找一种使用新HttpClientModule 的HttpClient 将查询参数传递到API 调用的方法，但尚未找到解决方案。使用旧的 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

但是，新的HttpClientget() 方法没有search 属性，所以我想知道在哪里传递查询参数？

【问题讨论】：

使用 Angular 7，您可以将参数编写为对象并像这样使用它：this.httpClient.get(url, params 查看***.com/a/54211610/5042169

【参考方案1】：

我最终通过 get() 函数上的 IntelliSense 找到了它。所以，我会把它贴在这里给任何正在寻找类似信息的人。

无论如何，语法几乎相同，但略有不同。参数需要初始化为HttpParams()，而不是使用URLSearchParams()，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 在下面的评论中指出的那样，This Question 中有很多关于如何分配多个参数的好答案。

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 )

【讨论】：

第一个sn-p错了。 let params = new HttpParams(); params.set(...) 不会按预期工作。见***.com/questions/45459532/…

@joshrathke 你能补充一下如何将标题和参数一起添加吗？

@SavadKP 你可以像这样设置它们 this.http.get(url, headers: headers, params: params);并阅读新的 HttpHeaders，如 HttpParams

我猜 new HttpParams(fromObject: param1: 'value1', ... ); 是最简单的方法（角度 5+）然后是 params.set(...)。

【参考方案2】：

joshrathke 是对的。

在 angular.io docs 中写道，@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。

【参考方案3】：

在创建 HttpParamaters 时，您可以（在版本 5+ 中）使用 fromObject 和 fromString 构造函数参数来简化操作

    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

【讨论】：

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

@danger89 是的。但请注意：只允许使用字符串或字符串 [] 值！

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

【参考方案4】：

RequestOptions

类中

URLSearchParams

类型的

search 属性在角度 4 中已弃用。相反，您应该使用 params URLSearchParams 类型的属性。

【参考方案5】：

更简洁的解决方案：

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

【参考方案6】：

你可以这样传递

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

【讨论】：

是的，但这会导致在窗口外打字

@DanLatimer 你不必使用任何，所以你可以一直使用打字直到你把它传递给params

【参考方案7】：

如果你有一个可以转换成key: 'stringValue'对的对象，你可以使用这个快捷方式来转换它：

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

我就是喜欢传播语法！

【参考方案8】：

使用 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();