Вызов вложенного асинхронного метода внутри класса JS?

Рейтинг: 0Ответов: 0Опубликовано: 20.06.2023

Внутри класса объявлены три метода:

createChart - строит график по переданным данным ( chart js);

requestToServer - передача/получение данных на сервер;

sendData - результирующий метод (сбор введенных данных пользователем, отправка их на сервер, получение ответа от сервера с данными из БД, построение графика);

Проблема заключается в том, что в методе sendData интерпретатор не дожидаясь выполнения метода requestToServer, который запишет в свойство объекта необходимые данные для построения графика, вызывает метод createChart, который конечно же не находит нужных данных.

class Charts {

  constructor(csrfToken, data = null) {
    this.csrfToken = csrfToken;
    this.data = data;
  }

  createChart(xData, yData, legend, typeOfChart) {

    const context = document.querySelector('#report').getContext('2d');

    return new Chart(context, {
      type: typeOfChart,
      data: {
        labels: xData,
        datasets: [{
          label: legend,
          data: yData
        }]
      }
    });

  }

  async requestToServer({
    url,
    transaction,
    newItem,
    subNewItem,
    date,
    type
  }) {

    let response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'X-CSRF-TOKEN': this.csrfToken
      },
      body: JSON.stringify({
        "transaction": transaction,
        "newItem": newItem,
        "subNewItem": subNewItem,
        "date": date,
        "type": type
      })
    });

    if (response.ok) this.data = await response.json();

  }

  sendData() {
    const btn = document.forms[0]['generate'];
    /*********/
    btn.addEventListener('click', async() => {
      await this.requestToServer({
        url: url,
        date: [result[1], result[2]],
        transaction: result[3],
        newItem: result[4],
        subNewItem: result[5],
        type: result[0]
      });

      window.location.href = "http://example.com/chart";
    });

    this.createChart(
      this.data.date, this.data.sum, 'bla-bla-bla', this.data.type
    );
  }

}

Помоги советом плз, как правильно вызвать вложенные методы?

Ответы

Ответов пока нет.