각도 4 HttpClient 쿼리 매개 변수

나는 새와 API 호출에 쿼리 매개 변수를 전달할 수있는 방법을 찾고있다 HttpClientModule의 HttpClient및 해결책을 찾기 위해 아직있다. 이전 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속성이 없으므로 쿼리 매개 변수를 어디에 전달해야하는지 궁금합니다.

나는 get()기능 에 대한 IntelliSense를 통해 그것을 찾았습니다 . 비슷한 정보를 찾는 사람을 위해 여기에 게시하겠습니다.

어쨌든 구문은 거의 동일하지만 약간 다릅니다. URLSearchParams()매개 변수 를 사용 하는 대신 초기화해야 HttpParams()하며 get()함수 내의 특성 이 이제 params대신 호출 됩니다 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가 지적 했듯이이 질문 에는 여러 매개 변수를 할당하는 방법에 대한 많은 대답 이 있습니다.

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에서 사용되는 정확한 기능은 응용 프로그램에 따라 다를 수 있지만 속성 정의를 확인하는 것이 효과적이라는 것을 알았습니다. 아래 함수는 함수에 전달 된 parameters 변수 내에 해당 속성이있는 매개 변수 만 전달합니다.

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

HttpParamater를 만들 때 (버전 5 이상) fromObject 및 fromString 생성자 매개 변수를 사용하여 조금 더 쉽게 만들 수 있습니다.

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

또는:

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2

이렇게 전달할 수 있습니다

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})

더 간결한 솔루션 :

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })

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

{key: 'stringValue'}쌍 으로 변환 할 수있는 개체가있는 경우이 바로 가기를 사용하여 변환 할 수 있습니다.

this._Http.get(myUrlString, {params: {...myParamsObject}});

나는 확산 구문을 좋아한다!

joshrathke가 옳다.

angular.io에서 문서 것으로 기록 @ 각도 / HTTP에서 URLSearchParams가되지 않습니다 . 대신 @ angular / common / http에서 HttpParams 를 사용해야합니다 . 코드는 매우 유사하며 joshrathke가 작성한 것과 동일합니다. 예를 들어 다음과 같은 객체에 저장된 여러 매개 변수의 경우

{
  firstParam: value1,
  secondParam, value2
}

당신은 또한 할 수 있습니다

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

상속 된 속성이 필요한 경우 그에 따라 hasOwnProperty를 제거하십시오.

RequestOptions 클래스 에서 URLSearchParams 유형의 검색 속성은 각도 4에서 더 이상 사용되지 않습니다. 대신 URLSearchParams 유형의 params 속성을 사용해야합니다 .