Angular 2 : Retrieving Data with http get request from server using query string

Question

您好，我正在尝试使用 http get 请求和查询字符串获取数据。

我希望获取的 http url 是 'baseUrl' + 'querystring' 之类的 http://randomUrl.com/?var1=val1&var2=val2

我尝试像下面那样使用 URLSearchParams 但不知何故，而不是获取 'var1=val1&var2=val2' 作为查询字符串， 我正进入(状态 http://randomUrl.com/?[object%20Object]

下面是我的代码。我做错了什么？

在全局的HttpClientService中，

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Methods', 'GET');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append("X-Requested-With", "XMLHttpRequest");
    let options = new RequestOptions({ headers: headers });

    return this.http.get(`${baseURL.baseurl}${path}`, options)
        .map(this.extractdata)
        .catch(this.handleError);
}

在服务中， @Injectable() 导出类 GetDataService {

  constructor(private http: HttpClient) { }

  getData(queryparams): Observable<any> {

    return this.http.get('/front/search?' + `${queryparams}`)
 }
}

在使用上述服务的组件中，

获取数据():无效{

    let params = new URLSearchParams();
    params.set('var1', 'val1')
    params.set('var2', 'val2')
    params.set('var3', 'val3')

    this.getdata.getData({search:params})
        .subscribe
        (
        data => this.data = data,
        error => this.errorMessage = error
        )
}
ngOnInit(): void {
    this.getData();
}

我提前感谢你的帮助

Answer 1

URLSearchParams 实际上会将字符串格式化为您想要的 url，这意味着，它将查询字符串创建为正确的格式，所以就像您想要的那样:

var1=val1&var2=val2&var3=val3

所以你真的不需要对它做任何其他事情，只需将它传递到你的 url 中。所以请尝试以下操作:

getData(): void {
  let params = new URLSearchParams();
  params.set('var1', 'val1')
  params.set('var2', 'val2')
  params.set('var3', 'val3')

this.getdata.getData(params) // just pass the params as such
    .subscribe(
    data => this.data = data,
    error => this.errorMessage = error
    )
}

然后是您的服务:

get(path: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get(baseUrl, path, options) // notice, pass the baseUrl as string and then just pass the queryparams as such
        .map(this.extractdata)
        .catch(this.handleError);
}

你得到 [object%20Object] 的原因是因为这一行:

this.getdata.getData({search:params})

这里你传递了一个对象 - 你创建了一个对象，它具有 search 属性，它包含你的查询字符串，这当然是你不想要的，因此只需传递你创建的查询字符串。