Есть три метода обьекта, где 1-й (requestToServer) делает запрос на сервер, получает ответ и записывает полученные данные в свойство обьекта , 2 - й (createLists) использует данные, записанные предыдущим методом, для создания новых элементов в DOM, а внутри 3-го (showCategories) происходит поочередный вызов методов (вначале первого, затем второго).
У меня сложность в том, что при выполнении 3-го метода, т.к. 1-й метод (fetch) это асинхронный метод, а 2-й синхронный, то вызов второго происходит раньше, чем 1-й запишет результат.
Как сделать так, чтобы 2-й вызывался только тогда, когда 1-й вернет результат (setTimeout не подходит)?
class Lists {
constructor(items) {
this.items = items;
}
requestToServer(url, newItem) {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-CSRF-TOKEN': this.csrfToken
},
body: JSON.stringify("newItem": newItem)
})
.then(response => response.json())
.then(data => this.items = Object.values(data));
}
createLists(element) {
this.items.map( item => {
let option = document.createElement('option');
let value = document.createTextNode(item);
option.appendChild(value);
element.appendChild(option);
});
}
showCategories() {
let url = "http://my-site/render";
btn.addEventListener( 'click', event => {
let newitem = event.target.value;
let element = document.forms[0]['category'];
this.requestToServer(url, newItem);
this.createLists(element);
});
}
