Angular용 HttpParams 빌더

인사말,

오늘 작업 중인 Angular 프로젝트의 코드를 다시 살펴보고 서비스 클래스에서 다음 코드를 검토했습니다.

  import { HttpParams } from '@angular/common/http';

  buildParams(filter: any) {
    let params = new HttpParams();

    if (filter.uf) {
        params = params.append('uf', filter.uf);
    }

    if (filter.cidade) {
        params = params.append('cidade', filter.cidade);
    }

    if (filter.pagination) {
        const pagination = filter.pagination;

        params = params.append('sort', 'cidade,asc');

        if (pagination.pageNumber) {
            params = params.append('page', pagination.pageNumber);
        }

        if (pagination.pageSize) {
            params = params.append('size', pagination.pageSize);
        }
    }

    return params;
  }

아시다시피 HttpParams는 HttpClient를 사용하여 http 요청에 전달된 쿼리 매개변수를 선언하는 데 사용되는 변경할 수 없는 클래스입니다.

그리고 HttpParams 불변성 측면 때문에 인스턴스가 변경되지 않고 대신 .append()를 호출할 때마다 새 인스턴스가 생성됩니다. 따라서 새 인스턴스로 params 변수를 재할당해야 합니다.
params = params.append('uf', filter.uf);
필요하긴 하지만 그다지 좋아 보이지는 않습니다. 그래서 나는 일을 더 깔끔하게 유지하기 위해 빌더를 생각해 냈고 위의 코드를 다음과 같이 바꿉니다.

import { HttpParams } from '@angular/common/http';
import { HttpParamsBuilder } from 'http-params.builder';

buildParams(filter: any) {
    const builder = new HttpParamsBuilder();

    builder
      .append('uf', filter.uf)
      .append('cidade', filter.cidade);

    if (filter.pagination) {
        const pagination = filter.pagination;
        builder
            .append('sort', 'cidade,asc')
            .append('page', pagination.pageNumber)
            .append('size', pagination.pageSize);  
    }

    return builder.build();
  }

제 생각에는 더 간결해 보입니다. 다음은 HttpParamsBuilder의 구현입니다.

import { HttpParams } from '@angular/common/http';

export class HttpParamsBuilder implements IHttpParamsBuilder {
  private params: HttpParams;

  constructor() {
    this.params = new HttpParams();
  }

  append(param: string, value: any): this {
    if (value) {
      this.params = this.params.append(param, value);
    }
    return this;
  }

  build(): HttpParams {
    return this.params;
  }
}

interface IHttpParamsBuilder {
  append(key: string, value: any): this;
  build(): HttpParams;
}

네 생각을 말해봐!