為我的 api 調用使用對象解構而不是默認參數

Question

我正在嘗試對 vue 組件中的 api 調用使用對象解構而不是默認參數。 有人能告訴我為什么這行不通嗎？ 它們都是我的組件中的方法，大寫鎖定變量設置在組件外部，而 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函數中的任何參數。 但是在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 2

我認為你想要的是這樣的：

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

（是的，如果沒有參數名稱全是數字，確實可以保證順序。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 向您展示。