Angular 4 HttpClient查询参数 [英] Angular 4 HttpClient Query Parameters

问题描述

我一直在寻找一种方法，使用新的 HttpClientModule 的 HttpClient 还没有找到解决方案。使用旧的 Http 模块，您可以编写类似的内容。

I have been looking for a way to pass query paramters into an API call with the new HttpClientModule's HttpClient and have yet to find a solution. With the old Http module you would write something like this.

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调用：

This would result in an API call to the following URL:

localhost：3001 / api / v1 / data / logs？logNamespace = somelogsnamespace

然而，新的 HttpClient get（）方法没有搜索属性，所以我想知道哪里传递查询参数？

However, the new HttpClient get() method doesn't have a search property, so I am wondering where to pass in the query parameters?

推荐答案

我最终通过获取的intellisense找到它（ ）功能。得爱intellisense。所以我会在这里发布给任何正在寻找类似信息的人。

I ended up finding it through the intellisense on the get() function. Gotta love intellisense. So I'll post it here for anyone who is looking for similar information.

无论如何语法几乎相同，但略有不同。而不是使用 URLSearchParams（），参数需要初始化为 HttpParams（）以及<$ c中的属性$ c> get（）函数现在称为 params 而不是 search 。

Anyways the syntax is nearly identical, but slightly different. Instead of using URLSearchParams() the parameters need to be initialized as HttpParams() and the property within the get() function is now called params instead of 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 })
}

我实际上更喜欢这种语法，因为它更多参数不可知。我还重构了代码，使其略微缩写。

I actually prefer this syntax as its a little more parameter agnostic. I also refactored the code to make it slightly more abbreviated.

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

多个参数

我意识到我经常需要将多个参数传递给查询，所以我想我会添加一个关于如何做到这一点的部分。到目前为止，我找到的最好方法是定义一个 Params 对象，其中包含我想要定义的所有参数。正如 Estus 在下面的评论中指出的那样，这个问题关于如何分配多个参数。

I realized how much I often need to pass multiple parameters into a query so I figured I would add a section on how to do that as well. The best way I have found thus far is to define a Params object with all of the parameters I want to define defined within. As Estus pointed out in the comment below, there are a lot of great answers in This Question as to how to assign multiple parameters.

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中使用的确切函数可能会因您的应用程序而异，但我发现检查属性定义的效果非常好。下面的函数只传递在传递给函数的参数变量中具有相应属性的参数。

Another thing I often do with multiple parameters is allow the use of multiple parameters without requiring their presence in every call. Using Lodash, its pretty simple to conditionally add/remove parameters from calls to the API. The exact functions used in Lodash or Underscores, or vanilla JS may vary depending on your application, but I have found that checking for property definition works pretty well. The function below will only pass parameters that have corresponding properties within the parameters variable passed into the function.

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 })

这篇关于Angular 4 HttpClient查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！