Angular 4 HttpClient 查询参数

Question

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

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

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

但是，新的 HttpClient get() 方法没有 search 属性，所以我想知道在哪里传递查询参数？

原文由 joshrathke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

无论如何，语法几乎相同，但略有不同。 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 })
}

我实际上更喜欢这种语法，因为它与参数无关。我还对代码进行了重构，使其更加简洁。

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

原文由 joshrathke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 Angular 7，我在不使用 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();
  }
}

原文由 Jun711 发布，翻译遵循 CC BY-SA 4.0 许可协议