Почему не выполняется код с открытием попапа внутри then?

Question

[Kipsi]

После успешного запроса должен открыться попап и через 2 сек закрыться, но этот код игнорируется. В чем может быть проблема?

myForm.addEventListener("submit", function (event) {
    event.preventDefault();
    var form = new FormData(myForm);

    fetch("form-send.php", {
        method: "POST", 
        body: form 
      })
      .then((response) => {
        modal.classList.add('open')
        setTimeout(() => {
          modal.classList.remove('open')
        }, 2000)
        return response.json()
      })
      .then((data) => { 
        console.log(data); 
      })
      .catch((error) => {
        console.error(error);
      });
  });

Comments

[szQocks]

в этом коде нет ошибок, если окно не открывается, проблема либо в том что сразу отрабатывает блок catch либо что-то не так с modal

[Kipsi]

szQocks, ну у меня при этом
.then((data) => {
console.log(data);
})
срабатывает а консоль лог в catch нет. и консоль лог в response тоже работает если его там сделать. И сама модалка если отдельно скажем добавить строчку modal.classList.add('open') , то она открывается

[szQocks]

Kipsi, значит на момент когда запрос выполняется - в modal - не элемент который на странице, а какая-то шляпа неизвестная мне, поэтому не работает

от того что твой код по открытию модалки находится в микротаске - это знаешь ли погоду не особо меняет, или от того что код который находится по закрытию модалки в макротаске

[Kipsi]

szQocks, Ну это и странно, что он вроде не видит получается элемент хотя эта модалка прямо на странице в html находится изначально всегда.

[Lynn «Кофеман»]

А modal это что вообще?

[Виктор Л]

а так допустим?

myForm.addEventListener("submit", async (event) => {
      event.preventDefault();

      try {
        
        const form = new FormData(myForm);
        const response = await fetch("form-send.php", {
          method: "POST",
          body: form
        });

        if (!response.ok) {
          throw new Error("Network response was not ok.");
        }

        modal.classList.add('open');

        await new Promise(resolve => setTimeout(resolve, 2000));

        modal.classList.remove('open');

        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    });

[Kipsi]

Lynn «Кофеман», див с модальным окном который сообщает об успешной отправленной форме.