Обещание и подача

Question

Я создаю форму с хэшированием внешнего пароля:

<form action='login.php' method='post' onsubmit='hash(this)'>
    Password: <input type='password' name='password'><br>
    <input type='hidden' name='shapassword'>
    <input type='submit'>
</form>

Моя хеш-функция использует веб-API SubtleCrypto. Вызывается digest() функция, которая возвращает Promise:

function hash(form) {
    const buff = new TextEncoder().encode(form.password.value);
    p1 = crypto.subtle.digest('SHA-512', buff).then(param => {
        form.shapassword.value = new TextDecoder().decode(param);
    });
}

Однако shapassword не передается в скрипт, который получает данные из формы. Я полагаю, hash() возвращается до выполнения Обещания, я прав? Как предотвратить выход из функции hash() или доступ к объекту form из функции then?

Answer 1

Вы должны позвонить preventDefault, чтобы запретить отправку формы по щелчку пользователя, и дождаться разрешения Promise, прежде чем отправлять форму.Также рекомендуется прикреплять слушателей с помощью Javascript вместо встроенных обработчиков:

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  getEncodedText(form);
});

function do(form) {
  const buff = new TextEncoder().encode(form.password.value);
  crypto.subtle.digest('SHA-512', buff).then(param => {
    form.shapassword.value = new TextDecoder().decode(param);
    form.submit();
  });
}

Answer 2

Вы можете вернуть hash функцию false, а затем, как только обещание будет выполнено, вызовите .submit()

function hash(form) {
    const buff = new TextEncoder().encode(form.password.value);
    p1 = crypto.subtle.digest('SHA-512', buff).then(param => {
        form.shapassword.value = new TextDecoder().decode(hash);
        form.submit();
    });
    return false;
}