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

问题描述

我一直在寻找一种使用新的 HttpClientModule 的 HttpClient 将查询参数传递到 API 调用的方法，但尚未找到解决方案.使用旧的 Http 模块，您可以编写类似这样的内容.

I have been looking for a way to pass query parameters 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() 方法没有 search 属性，所以我想知道从哪里传入查询参数?

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

推荐答案

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

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

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

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, it's 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屋！