Внутри класса обьявлены три метода:
createChart - строит график по переданным данным ( chart js)
requestToServer - передача/получение данных на сервер
sendData - результирующий метод (сбор введенных данных пользователем, отправка их на сервер,
получение ответа от сервера с данными из БД, построение графика).
Проблема заключается в том, что в методе
sendData интерпретатор не дожидаясь выполнения метода
requestToServer, который запишет в свойство обьекта необходимые данные для построения графика, вызывает метод
createChart, который не находит нужных данных.
Я пробовал обьявлять сам метод
sendData асинхронным и вызывать вложенные методы через
await, но у меня на верхнем уровне вложенности прикручен слушатель событий.
Вобщем я получаю ошибки либо
'await' has no effect on the type of this expression.
, либо что переменная
this.data.date не определена.
Подскажите, как правильно вызвать вложенные методы.
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
);
}
}
