Использование деструктуризации объекта вместо параметров по умолчанию для моих вызовов API - PullRequest
Новая
       33

Использование деструктуризации объекта вместо параметров по умолчанию для моих вызовов API

3 голосов
/ 16 марта 2020

Я пытаюсь использовать деструктуризацию объекта вместо параметров по умолчанию для моих вызовов API в моем vue компоненте. Может кто-нибудь сказать мне, почему это не будет работать? Оба метода в моем компоненте, переменные caps lock установлены вне компонента, а эти извлекаются из данных. 

buildUrl() {
  const options = {
    parm1: PARM_1,
    parm2: PARM_2,
    parm3: this.parm3,
    parm4: this.parm4
  };
  const { parm1, parm2, parm3, parm4 } = options;
  return `things?parm1=${parm1}&parm2=${parm2}&parm3=${parm3}&parm4=${parm4}`;
}

async foo() {
  const { parm1, items: things } = await this.$axios.$get(
    this.buildUrl({ parm1: this.parm1 + 1 })
  );
  this.parm1 = parm1;
  this.things.push(...things);
},

Ответы [ 3 ]

3 голосов
/ 16 марта 2020

Похоже, вы не принимаете никаких параметров в функции buildUrl. Но в foo вы передаете объект в buildUrl.

. В дополнение к этому, для обработки параметров массового URL-адреса проще использовать новый и блестящий URLSearchParams API если поддержка браузера позволяет это (это означает: нет IE).

Поэтому измените свой код на: 

buildUrl({ 
  parm1 = PARM_1, 
  parm2 = PARM_2, 
  parm3 = this.parm3, 
  parm4 = this.parm4 
}) {
  const params = new URLSearchParams({ parm1, parm2, parm3, parm4 });
  return `things${params}`;
}
1 голос
/ 16 марта 2020

Вы вообще не принимаете никаких параметров в buildUrl. Похоже, вы хотите принять один параметр, который вы деструктурируете, и предоставить различные значения по умолчанию. Это выглядит так: 

buildUrl({parm1 = PARM_1, parm2 = PARM_2, parm3: this.parm3, parm4: this.parm4} = {}) {
  return `things?parm1=${parm1}&parm2=${parm2}&parm3=${parm3}&parm4=${parm4}`;
}

Или с большим количеством разрывов строк: 

buildUrl({
    parm1 = PARM_1,
    parm2 = PARM_2,
    parm3: this.parm3,
    parm4: this.parm4
} = {}) {
  return `things?parm1=${parm1}&parm2=${parm2}&parm3=${parm3}&parm4=${parm4}`;
}

Эта часть является деструктурируемой: 

{parm1 = PARM_1, parm2 = PARM_2, parm3: this.parm3, parm4: this.parm4}

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

Эта часть делает весь параметр необязательным, предоставляя для него значение по умолчанию: 

= {}

Это заставляет buildUrl() работать, используя все значения по умолчанию , (Общий анонимный параметр по умолчанию равен {}, тогда все деструктурированные параметры получают свои значения по умолчанию, потому что {} не имеет свойств для них.) Без этого общего значения по умолчанию вам придется использовать buildUrl({}).

Примечание: параметры запроса (как имя, так и значение) должны быть в кодировке URI. Ваш код этого не делает. В именах ваших параметров нет символов, нуждающихся в кодировке, поэтому вы можете их пропустить (но вы можете сделать это в случае, если вы измените их позже), но значения, вероятно, изменяются и требуют кодировки. 

buildUrl({
    parm1 = PARM_1,
    parm2 = PARM_2,
    parm3: this.parm3,
    parm4: this.parm4
} = {}) {
  // Ensures order (on up-to-date JavaScript engines) and gives us an object to use
  const params = {parm1, parm2, parm3, parm4};
  return "things?" + Object.entries(params).map(([key, value]) => `encodeURIComponent(key)=encodeURIComponent(value)`).join("&");
}

(Да, порядок действительно гарантирован при условии, что ни одно из имен параметров не содержит всех цифр. Это было частично гарантировано ES2015, и теперь ES2020 расширяет это до Object.entries и других, потому что это то, что в любом случае делают все основные двигатели JavaScript. )

Или, конечно: 

buildUrl({
    parm1 = PARM_1,
    parm2 = PARM_2,
    parm3: this.parm3,
    parm4: this.parm4
} = {}) {
  return "things" +
    `?parm1=${encodeURIComponent(parm1)}` +
    `&parm2=${encodeURIComponent(parm2)}` +
    `&parm3=${encodeURIComponent(parm3)}` +
    `&parm4=${encodeURIComponent(parm4)}`;
}

Или используйте URLSearchParams, так как nirazul покажет вам .

1 голос
/ 16 марта 2020

Я думаю, что вы хотите, что-то вроде этого: 

buildUrl({
  parm1 = PARM_1,
  parm2 = PARM_2,
  parm3 = this.parm3,
  parm4 = this.parm4
}) {
  return `things?parm1=${parm1}&parm2=${parm2}&parm3=${parm3}&parm4=${parm4}`;
}

async foo() {
  const { parm1, items: things } = await this.$axios.$get(
    this.buildUrl({ parm1: this.parm1 + 1 })
  );
  this.parm1 = parm1;
  this.things.push(...things);
},

Что означает parm1 по умолчанию PARM_1, parm2 по умолчанию PARM_2, parm3 по умолчанию this.parm3 и parm4 по умолчанию this.parm4.

...