Элегантный способ уменьшить код при настройке URI queryParams в Angular?

Question

У меня есть метод, который устанавливает конечную точку в сервисе angular и, поскольку в параметре запроса есть 3 или четыре элемента, строка становится длинной.

Есть ли более элегантный способ настроить это?

private endpoint = (
    var1: Type1,
    var2: Type2,
    var3: Type3
  ) => {
    let uri = `path?query1=${var1}&query2=${var2}&draft=true&query3=${var3}`;
    return uri;
  };

Я думаю, что должен быть лучший способ написать это, где, если мне потребуется расширить это, это может быть быстрее? Я не могу найти ничего, что могло бы помочь мне онлайн.

У кого-нибудь есть идеи?

Answer 1

Попробуйте установить параметры в виде массива:

endpoint = params => {
      let uri ='path?';
      params.forEach((element, ind) => {
          uri += `query${++ind}=${element}${(ind < params.length - 1) ? '&':''}`;
      });
      return uri;
  }

  console.log(endpoint(['first','second','third']))

или используйте аргументы объекта функции :

function endpoint() {
    const params = arguments[0];
    let uri ='path?';
    params.forEach((element, ind) => {
        uri += `query${++ind}=${element}${(ind < params.length - 1) ? '&':''}`;
    });
    return uri;
}

console.log(endpoint(['first','second','three']))

Answer 2

Вы можете использовать params Propertry параметра options методов HTTP. Попробуйте следующее

private options = (
    var1: Type1,
    var2: Type2,
    var3: Type3
  ) => {
    return { query1: var1, query2: var2, query3: var3 } 
  };

Вы можете использовать его как

this.http.get(this.path, { params: this.options('one', 'two', 'three') });

Answer 3

В моем случае я создал отдельный сервис для обработки таких вещей, например:

@Injectable({
    providedIn: 'root'
})
export class SharedHttpService {

    /**
     * Function transforms the given object's properties into a string of GET params;
     * This function will omit properties that are undefined;
     * @param criteria - object representing fields that can be undefined or not.
     */
    transformCriteria(criteria: Criteria | NonPagedCriteria): String {
        if (!criteria) {
            return '';
        }

        let criteriaString = '?';
        for (const key of Object.keys(criteria)) {
            if (criteria[key] === undefined || criteria[key] === null || criteria[key].length === 0 || key === 'sort') {
                continue;
            }
            if (criteriaString !== '?') {
                criteriaString += '&';
            }
            criteriaString += key + '=' + criteria[key];
        }
        if (criteria.sort && criteria.sort.direction) {
            const sort = {...criteria.sort};
            criteriaString += `&sort=${sort.paramName},${sort.direction}`;
        }

        return criteriaString;
    }
}

Обратите внимание, что Criteria и NonPagedCriteria - это пользовательские интерфейсы, которые расширяются объектами, которые являются передается службе http и рассматривается как набор параметров, которые должны отображаться в URL.