角度4 HttpClient查询参数

我最终通过互联网上的智能感知找到了它 get() 作用所以,我会把它贴在这里,给任何想找类似信息的人。

无论如何,语法几乎相同,但略有不同。而不是使用 URLSearchParams() HttpParams() 以及 现在调用函数 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、下划线或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 })

您可以(在版本5+中)使用 fromObject 和 来自字符串

    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

你可以这样传球

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

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

我通过使用以下命令而不使用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();
  }
}

在angular.io中 docs 不推荐使用@angular/http中的URLSearchParams .相反,您应该使用 .代码与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}});

我只是喜欢传播语法!

搜索 在里面 请求选项 类在angular 4中不推荐使用。相反,您应该使用 参数 .