#javascript #fetch-api
#язык JavaScript #fetch-api
Вопрос:
У меня есть простая форма, в которой я хотел бы проверить наличие действительных данных перед отправкой и сохранением данных.
Однако из-за fetch(...) асинхронности я не могу остановить проверку и дождаться результата.
Есть ли способ остановить асинхронность выборки?
Или, может быть, это лучший способ сделать это?
form.addEventListener('submit', (event) =gt; { fetch(`/check?id=${id}`) .then((res) =gt; res.json()) .then((json) =gt; { if (json.error) { // Prevent the submit here // event.preventDefault(); } }); }); Комментарии:
1. добавьте
event.preventDefault()перед вызовом вfetch(). Без этого форма отправляется независимо от успеха или неудачи выборки.2. @RandyCasburn Если выборка не возвращает ошибку, я бы хотел, чтобы форма отправлялась нормально. Разве ваше предложение не остановило бы форму полностью?
3. Если проверка проверки в любом случае выполняется на стороне сервера, зачем делать это в двух отдельных запросах? С таким же успехом вы могли бы выполнить проверку одновременно с сохранением. Если безопасность и целостность данных важны, ваша конечная точка «сохранения» всегда должна проверять входные данные самостоятельно. В противном случае кто-то может обойти вашу конечную точку проверки и напрямую попасть в конечную точку сохранения, а также повредить данные. Есть ли у вас контроль над конечной точкой сохранения?
4. После успешной проверки на стороне клиента все, что вам нужно сделать, это сделать
form.submit(). Это оно.5. @DSander Да, проверка также выполняется на стороне сервера, так что это, безусловно, вариант. Тем не менее, я хотел сделать более удобный для пользовательского интерфейса метод. Вместо того, чтобы всегда вызывать перезагрузку страницы.
Ответ №1:
Если вам нужен удобный пользовательский интерфейс, вы можете добавить прослушиватели onfocusout() или onblur() в каждое поле формы и проверять каждый ввод по мере их ввода. Вы можете отключить кнопку «Отправить» для формы по умолчанию и включить ее только после прохождения всех проверок. Что — то вроде этого:
function validateId() { let id = document.forms.myForm.id.value; if(id === ""){ document.forms.myForm.submit.disabled = true; return; } fetch(`https://api.github.com/users/${id}/repos`) .then((res) =gt; res.json()) .then((json) =gt; { if (json.error) { // fail validation alert("Failed!"); document.forms.myForm.submit.disabled = true; } else { // success document.forms.myForm.submit.disabled = false; } }) .catch(error =gt; { alert("Error! " error); document.forms.myForm.submit.disabled = true; }); } lt;form name="myForm" action="/action_page.php" method="post"gt; ID: lt;input type="text" name="id" onfocusout="validateId()"gt; lt;input type="submit" name="submit" value="Submit" disabledgt; lt;/formgt;