Вызов вложенного асинхронного метода внутри класса JS?
Внутри класса объявлены три метода:
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
);
}
}
Помоги советом плз, как правильно вызвать вложенные методы?
Источник: Stack Overflow на русском