是否有任何 JS 内置类方法在引用任何方法时只运行一次？

Question

我有一个用于重新加载一些元素的类。

const getMe = async () => await 
  fetchURL("https://MY.SITE/api/users/me")
    .then((res) => res.data);

class loader {
  EVERYonceWHENmethodCALLED() {
    self.ME = (async () => await getMe())();
  }
  me() {
    $("#me").html(`${self.ME.grade}${self.ME.number}[Tickets: ${self.ME.likeTicket}]`);
  } // ** likeTicket depends on ME **
  async chart() {
    if ($("body").find("#chart").length) {
      const musicChart = await fetchURL(`https://MY.SITE/api/music/chart?&gender=${self.ME.gender}`);
      $("#chart").html(await listElementsOf(musicChart.data.list));
    } // ** listElementsOf depends on ME ( It lets me know what musics I 'liked' to ) **
  }
  async search(q) {
    if ($("body").find("#searchResult").length){
      if(q) $("#searchResult").attr("data-q", q);
      else q = $("#searchResult").attr("data-q");

      const searchResult = await fetchURL(`https://MY.SITE/api/music/search?q=${q}`);
      $("#searchResult").html(await listElementsOf(searchResult));
    }
  }
  meAndChart() {
    self.me();
    self.chart();
  }
  loadEverything() {
    self.meAndChart();
    self.search();
  }
}

我需要在重新加载任何其他元素之前重新加载 ME，并且我正在寻找一种方法来做到这一点。我可以像 new loader.me(); 一样使用 new，但我不想每次都使用 new。

有什么办法可以完成预期的工作吗？感谢您的阅读。

Answer 1

我对您的代码做了一些更改：

• 更改 EVERYonceWHENmethodCALLED ，以便将 ME 设置为等待的对象而不是承诺。
• 对当前对象使用 this 而不是 self （请参阅 此处了解详细信息）。
• 将 me 和 chart 分别重命名为 _me 和 _chart。
• 添加了方法 me 和 chart，它们在 EVERYonceWHENmethodCALLED 之后调用内部方法。
• 更新了 meAndChart 以在 EVERYonceWHENmethodCALLED 之后调用内部方法。

请注意，使用 await 调用 async 函数通常是一个很好的做法（并且通常是必要的），并且这要求调用者函数也是 async >。

const getMe = async () => await 
  fetchURL("https://MY.SITE/api/users/me")
    .then((res) => res.data);

class loader {
  async EVERYonceWHENmethodCALLED() {
    this.ME = await getMe();
  }
  _me() {
    $("#me").html(`${this.ME.grade}${this.ME.number}[Tickets: ${self.ME.likeTicket}]`);
  } // ** likeTicket depends on ME **
  async _chart() {
    if ($("body").find("#chart").length) {
      const musicChart = await fetchURL(`https://MY.SITE/api/music/chart?&gender=${self.ME.gender}`);
      $("#chart").html(await listElementsOf(musicChart.data.list));
    } // ** listElementsOf depends on ME ( It lets me know what musics I 'liked' to ) **
  }
  async me() {
    await this.EVERYonceWHENmethodCALLED();
    this._me();
  }
  async chart() {
    await this.EVERYonceWHENmethodCALLED();
    await this._chart();
  }
  async search(q) {
    if ($("body").find("#searchResult").length){
      if(q) $("#searchResult").attr("data-q", q);
      else q = $("#searchResult").attr("data-q");

      const searchResult = await fetchURL(`https://MY.SITE/api/music/search?q=${q}`);
      $("#searchResult").html(await listElementsOf(searchResult));
    }
  }
  async meAndChart() {
    await this.EVERYonceWHENmethodCALLED();
    this._me();
    await this._chart();
  }
  async loadEverything() {
    await this.meAndChart();
    await this.search();
  }
}