Нужно ли оборачивать сбор данных из формы в promise?

Question

[Вечно Крайний]

Здравствуйте! Волей обстоятельств мне как бекэнду(начинающему) приходится выполнять работу на фронте.
У меня есть форма с полями ( input and select) данные из которой я отправляю через ajax и сохраняю. У меня вопрос. Нужно ли функцию сбора сделать ассинхронной чтобы данные точно были собраны перед отправкой на сервер? Насколько я понял то js может перейти к следующей строчке кода не ожидая выполнения предущией.
в данный момент выглядит вот так.
Функция которая собирает данные

function getSaveData() {
    let data = new Map()
    $('.ajax_field').each(function () {
        let id = $(this).attr('id')
        data[id] = $(this).val()
    })
    return data
}

Вот эта штука отправляет

$(document).on('click', '#save_rc_btn', () => {
    let data = getSaveData()
$.ajax({
    url: 'www.expample.ru/file.php',
    type: 'POST',
    data: { data: data },
    dataType: 'json',
    success: function (response) {
        console.log(response)
    },
    error: function (data) {
        console.log(data)
    },
})
})

P.S.: Будет очень круто если есть у кого ссылка на статью там или образец хорошего кода, где будет описано почему именно так правильно делать и т.д.

Comments

[WapSter]

Нет. Это не ассинхронная операция

[Вечно Крайний]

Правильно я понял что если я работаю с элементами на странице, то можно не заморачиваться всякими async, promise и прочим?

[WbICHA]

Вечно Крайний, в смысле? Промисы надо использовать тогда, когда надо и не использовать тогда, когда не надо.
В целом, конечно, на фронте асинхрон актуален в основном только при запросах, но разные ситуации бывают.

Answer 1

[Stalker_RED]

Нет, не нужно делать ее асинхронной, из формы и синхронно получится данные собрать.

1. Если вдруг вы переделаете форму так, чтобы у полей были name, то можете выбросить функцию getSaveData и использовать $(form).serialize();

2. сбор данных не обязательно записывать в переменную, да еще и объявленную через let. Можно делать прямо вот так:

$.ajax({
    url: 'www.expample.ru/file.php',
    type: 'POST',
    data: { data: getSaveData() },  // переменная data не нужна
    // ...
})

или, если у ваших полей есть имена

$.ajax({
    url: 'www.expample.ru/file.php',
    type: 'POST',
    data: { data: $(form).serialize() },
    // ...
})

и можно использовать встроенный в браузер способ

$.ajax({
    url: 'www.expample.ru/file.php',
    type: 'POST',
    data: { data: new FormData(form) },
    // ...
})

Кроме того, довольно странно делать отправку данных только по клику по кнопке. Обычно формы также отправляются при нажатии enter, и она таки отправится средствами самого браузера, "мимо" вашего ajax-ового отправлятора.

Соответственно правильнее будет куак-то так:

const $form = $("#idForm");
$form.on('submit', function(evt) {
    evt.preventDefault(); // отмена обычной отправки
    
    $.ajax({
           type: "POST",
           url: $form.attr('action'),
           data: $form.serialize(),
      // ...

А если вам вдруг не нужна поддержка очень старых браузеров, то можно вообще выбросить jQuery

const form = document.getElementById('myForm');

form.addEventListener('submit', function(evt){
  evt.preventDefault();
  fetch(form.action, {
    method: 'POST',
    body: new FormData(form)
  });
});

https://developer.mozilla.org/ru/docs/Web/API/Fetc...

Comments

[Вечно Крайний]

спасибо большое, что так подробно. Я просто сделал именно по клику, потому что требовалось провести несколько проверок перед отправкой. Помимо обязательных полей, также есть проверки например на площадь. что общая площадь не может быть меньше суммы площадей кухни и жилой. Что этаж не может быть выше этажность и т.д. Соотственно если что-то введено не правильно, то кнопка сохранить неактивна. До этого момента я делал проверку по клику на кнопку сохранить. Если что-то не так, то показывается уведомления что именно не так и ошибки подсвечиваются красным.(точнее сами поля в которых ошибки). Теперь появилось чуть больше времени решил улучшить код и копнуть во фронт и js глубже.

[Вечно Крайний]

попробую как получиться сделать с $(form).serialize() У меня там много полей (инпуты, селекты, селеткты с множествееным выбором) интересно как все это отработает.