Angular 4 HttpClient 쿼리 파라미터

Angular 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()기능.그래서 비슷한 정보를 찾고 계신 분들을 위해 여기에 올려드리겠습니다.

어쨌든 구문은 거의 동일하지만 약간 다릅니다.사용하는 대신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, Unslumsores 또는 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 })

(버전 5+에서는) HttpPParamaters를 작성할 때 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에서는 Http Params를 사용하지 않고 아래를 사용하여 작업을 수행했습니다.

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

조쉬라스케 말이 맞아요

angular.io 문서에는 @sec/sec의 URLearchParams는 권장되지 않는다고 기재되어 있습니다.대신 @angular/common/http의 Http Params를 사용해야 합니다.그 코드는 조쉬래쉬가 쓴 것과 매우 유사하고 동일하다.예를 들어 다음과 같은 오브젝트에 저장된 여러 파라미터의 경우

{
  firstParam: value1,
  secondParam, value2
}

할 수도 있다

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

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

「」로 할 수 .{key: 'stringValue'} 이 할 수 .

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

난 그냥 확산 구문이 좋아!

RequestOptions 클래스의 URLearchParams 유형의 검색 속성은 angular 4에서는 사용되지 않습니다.대신 URLearchParams 유형의 params 속성을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/45470575/angular-4-httpclient-query-parameters