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

ProjectSoft,
Спасибо!
У меня есть окно, где пользователь выбирает временной интервал (начало, конец), выбирает еще несколько настроек для отрисовки графика и нажимая на кнопку btn, на которую я прикрутил обработчик, получает график. Мне показалось, что внедрить этот код вместе будет разумно)
Буду изучать ваше решение. Еще раз спасибо.

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

Aetae,
Спасибо!
Вы правы. Теперь осталось сообразить. что с этим можно сделать.
Буду думать)

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

szQocks,

береги нервы
по факту:
Этот код я не вырывал ниоткуда. Я его написал сам и правдиво написал также, что не силен в js и также правдиво написал, что не указал одноеменную (с методом) переменную.

"а ну ты уже успел исправить вопрос, но сути не меняет" - у меня и в мыслях не было наводить тень на плетень на гения js. Исправил, что бы те. кто будет читать комменты могли разобраться

Мне думается, что одной из целей создания данного форума было и то, что менее опытные могут получить помощь у более опытных. Так что мозг я не никому не выношу.
Считаешь обратное - не отвечай.

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

WbICHA,
перенес вызов this.createChart в колбек и получил ошибку, что обьект елемента (кнопка), которая активирует событие клика не определена, т.к. мы редиректимся на другую страничку, где ее нет((

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

    }

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

WbICHA,
Дык не нужно этого делать, т.к. у меня в первоначальном коде this и так определен как контекст экземпляра класса. Автор ответа не верно меня понял.

Проблема в том, что перед вызовом вложенного метода createChart не успевает отработать метод requestToServer.

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

Aetae,
Элегантное решение, но ,как вы выразились, увы не авторского вопроса)
Господа, ну кто-нибудь!

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

szQocks,
голова кругом))
попробуем внести ясность:
мой изначальный код

createChart.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]
                }
            );

где createChart это кнопка. Здесь сомнений быть не может))

И так как я в колбеке использую стрелочную функцию, то и контекст я получаю "правильный" для для вызова внутри слушателя вложеного метода this.requestToServer.

Все это работало изначально. Кроме того, что метод this.createChart выполнялся не дожидаясь выполнения колбека обработчика событий

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

szQocks,
Сорян за настырность, я просто пытаюсь понять)))
Ведь мы же можем прикреплять слушатели и обработчики событий только к элементам DOM, а
метод класса элементом DOM не является, но мы прикручиваем на него обработчик !?!?
Я знаю, что я не силен в js, но сейчас я стремительно теряю веру в себя))

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

ProjectSoft,
Спасибо за ответ!
Сейчас попробую реализовать правки.
Если я правильно понял ваш вопрос о промисах (вы наверное имели в виду связку методов fetch()-then() например), то я не знаю как там реализовать остановку (await) интерпретатора пока он не получит успешно завершенный промис в резалт (я не силен в js, а особенно в асинхронном)

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

szQocks,
Спасибо!
На первый взгляд я понял замысел, только меня не оставляют сомнения ))
Я вот о чем:
мы приявязали контекст к this для вызова this.requestToServer - это я понял, но слушатель мы прикручиваем не на клик по кнопке createChart, а на методthis.createChart - вот это мне не понятно

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

@szQocks
извините, в методе sendData() я не указал, когда описывал вопрос строку
const createChart = document.forms[0]['generate'];

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

szQocks,
я по запарке создал переменную и метод с одним названием createChart
Вы назначили слушатель событий не клику по кнопке, а методу this.createChart и привязали контекст выполнения к текущему экземпляру класса.
Т.е. какое событие будет прослушиваться? Вызов метода?
Если честно, то я не совсем понял, как это сможет работать

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

@szQocks
@WblCHA

Может внутри класса обьявить еще один асинхронный метод и внутри него сначала вызвать
await sendData (убрав из него вложенный вызов createChart), а затем createChart?

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

WbICHA,
я думаю, что понял вашу подсказку))
все выше перечисленное, кроме криейтЧарт, вызывается в ответ на клик
Только я пробовал помещать код

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

внутрь слушателя, но тоже получал ошибку

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

WbICHA,
Может я неверно понял ваш вопрос.
Я рассудил так, что при клике мы обмениваемся инфой с сервером и делаем запись данных в свойство обьекта, затем переадресация на страницу, где будет отображен график и построение самого графика

Как применить рекурсию для получения данных из DOM?

@Rsa97
Спасибо!

Как применить рекурсию для получения данных из DOM?

0xD34F
Спасибо вы оч детально все описали!
Буду разбираться

Странное поведение скрипта js?

@MrDecoy
Я сильно извиняюсь, но у меня по этой теме появилась еще одна проблемка...

Пытаюсь удалить удалить событие "click" из элемента checkbox[i] после того, как оно сработало, как мы с вами и обсуждали.

А проблема в следующем:
вот мой скрипт js

class Modify  {

connectToServer (id) {

функция передает данные на сервер и получает ответ

}

changeData() {

ее мы с вами обсуждали ранее

   const destroyBtn = document.querySelector('button[name="remove"]');
   const hidden = document.querySelectorAll('td[hidden]');
   const checkbox = document.querySelectorAll('td > input');

   for (let i = 0; i < checkbox.length; i++) {
      checkbox[i].addEventListener('change', () => {
         if (checkbox[i].checked) {
            let id = hidden[i].innerHTML; 
     
   <b>старый код: </b>  
           destroyBtn.addEventListener( 'click', () =>  this.connectToServer (id) );

   <b>новый код:</b>
           function func () {
              return this.connectToServer (id);
           }
           destroyBtn.addEventListener( 'click',  func );
           destroyBtn.removeAddEventListener( 'click',  func );

}
}

Так вот при клике на " destroyBtn" консоль выдает ошибку, что функция this.connectToServer (id)

Uncaught TypeError: this.requestToServer is not a function
at HTMLButtonElement.func

Но, если я использую стары вариант со стрелочной функцией, то такой ошибки нет.
Подскажите почему так? Может из-за области видимости

Странное поведение скрипта js?

Вадим
Большое спасибо!!!

Странное поведение скрипта js?

@MrDecoy
Мне кажется я понял)

Т.к. у меня при снятии и установке флажка под событие "change" попадают оба элемента, вот они и выводятся