Асинхронная обработка форм
Занимаюсь
давно обещанным обновлением текстового редактора на портале. С наскока сделать не получилось - постоянно натыкаюсь на технический долг, который так или иначе мешает подключению к сайту новых библиотек. Интересно, что большинство современных WYSIWYG-редакторов Markdown делаются под популярные фреймворки: React, Angular, Vue. Найти что-то стабильной под сайт, написанный на ванильном JS, не так то просто.
Пока закрываю техдолги, добавил на сайт функцию для асинхронной обработки форм. А ванильные HTML-формы на Авторском Комиксе используются много где. В чем суть проблемы: обработчик отправки формы (событие submit) синхронный, как и все другие обработчики в JS. Поэтому, если в момент отправки формы нам нужно в асинхронном режиме дозапросить какие-то данные, просто через await мы это сделать не можем, так как обработчик завершит свою работу раньше, чем дождется выполнения асинхронной функции.
Решение проблемы можно посмотреть
в файле AsyncForm.js: предполагается, что все поля формы, которые требуют асинхронных действий перед отправкой формы имеют атрибут
'data-async-processing' и в поле с именем
'processAsync' содержат асинхронные функции, выполняющие необходимые операции. Если у формы есть такие поля, то в момент ее отправки, мы прервем обработку событий, выполним
'processAsync' где это необходимо, и только потом заново сэмулируем отправку формы. При этом эмуляция отправки формы происходит через
HTMLFormElement.prototype.requestSubmit.call(form, evt.submitter); что гарантирует, что при наличии нескольких кнопок отправки формы будет сохранена именно та, которую нажал пользователь.
Если у вас есть более элегантное решение для асинхронной обработки событий в JS, в частности событий отправки формы, напишите об этом в комментариях.