I have a class for reloading some elements.

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

I need to reload ME before reloading any other element, and I'm seeking a way to do this. I can employ new like new loader.me();, but I don't want to use new every time.

Is there any way for the intended job? Thanks for reading.

CodePudding user response：

I made some changes to your code:

• change EVERYonceWHENmethodCALLED so that ME is set to the awaited object rather than a promise.
• Using this instead of self for the current object (see here for details).
• Renamed me and chart to _me and _chart respectively.
• Added methods me and chart that call the internal methods after EVERYonceWHENmethodCALLED.
• Updated meAndChart to call the internal methods after EVERYonceWHENmethodCALLED.

Note that it is generally a good practice (and often necessary) to call async functions with await, and that requires the caller functions to be also 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();
  }
}