在我的 api 调用中使用对象解构而不是默认参数

Question

我试图在我的 vue 组件中对我的 api 调用使用对象解构而不是默认参数。有人能告诉我为什么这行不通吗？它们都是我组件中的方法，caps lock 变量设置在组件外部，而 this 是从数据中提取的。

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

Answer 1

我想你想要的是这样的：

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.

Answer 2

您似乎不接受 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}`;
}

Answer 3

您根本不接受 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("&");
}

(是的，如果参数名称的 none 是全数字，确实可以保证顺序。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 用作。

在我的 api 调用中使用对象解构而不是默认参数

Using object destructuring instead of default parameters for my api calls

javascript

destructuring