HTTP查询参数

时间:2019-07-10 10:29:31

标签: angular rest parameters angular-httpclient query-parameters

如果我有一个对象数组,用于存储用户选择的所有搜索过滤器,则其结构如下:

export const filterDataObject = [{
    date: '',
    tid: '',
    className: '',
    userName: '',
    category: [],
    limit: '50',
    sort: 'acs'
}];

例如,REST调用应该是这样的:

   http://localhost:1234/api/query? 
_filter=tid%3Dcdfg&_limit=50&_sort=asc

_filter收集所有参数,但限制和排序

如何将结果数组作为参数传递给我的httpClient rest请求,尤其是category数组?

2 个答案:

答案 0 :(得分:0)

将数据追加到URLSearchParams

const params = new URLSearchParams();
    params.set('sort', val);
    params.set('tid', val);
    params.set('limit', val);
    params.set('sort', val);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, data, options)
      .map(this.handleData)
      .catch(this.handleError);

答案 1 :(得分:0)

我在这里假设您只想向您的API发送一个过滤器,而不是向数组发送,并且您正在使用angular 4 +

选项1

this.http.get('http://localhost:1234/api/query', {params: filterDataObject[0]})...

选项#2

您可以使用HttpParams

import {HttpParams} from '@angular/common/http';
//...
let params = new HttpParams();

for(let key of Object.keys(filterDataObject[0])){
    params= params.set(key, filterDataObject[0][key]) ;
}

this.http.get('http://localhost:1234/api/query', {params: params})...

选项#3

您也可以尝试使用URLSearchParams(如果不需要IE支持)。

let sp = new URLSearchParams();

for(let key of Object.keys(filterDataObject[0])){
    sp.set(key, filterDataObject[0][key]) 
}

const url = `http://localhost:1234/api/query?${sp.toString()}`;
this.http.get(url)...