我有一個注冊表單，我有一個 javascript 函式，同時使用對 php 檔案的提取請求驗證表單輸入。代碼如下：
form.onsubmit = function() {
let signInData = JSON.stringify(Object.fromEntries(new FormData(form).entries()));
let flag = false;
fetch('php/sign_up.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: signInData,
})
.then(response => response.text())
.then(data => {
if(data != "1") {
document.getElementById("sign_up_error").innerHTML = data;
flag = false;
} else {
flag = true;
}
});
return flag
};
現在 fetch 命令需要一些時間才能完成，并且 .onsubmit 函式在完成之前會回傳一個值。現在我知道可以使用異步函式來等待使用 async-await 完成提取，但請看一看。讓我們可視化表單的代碼：
if(form.onsubmit()) {
sendFormData();
}
如您所見，他們并沒有使用異步函式來獲取資料，而是使用同步函式。在他們這邊， form.onsubmit() 將評估為空頭承諾。作為布林值的空承諾是真的，所以它總是只發送資料。而且我不能使用回呼，因為必須在該函式本身中回傳該值。
uj5u.com熱心網友回復：
- 使用異步等待而不是承諾鏈接
- 當頂部已經為 false 時，您無需將 flag 設定為 false
- 為事件監聽器提升你的函式，這是更好的做法
- 使用 !== 而不是 !=
const handleSubmit = async (e) => {
let signInData = JSON.stringify(
Object.fromEntries(new FormData(form).entries())
);
let flag = false;
const response = await fetch('php/sign_up.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: signInData,
});
const toText = await response.text();
if (toText !== '1'){
document.getElementById('sign_up_error').innerHTML = toText
return flag;
} else {
return flag = true;
}
};
form.onsubmit(handleSubmit);
uj5u.com熱心網友回復：
async如果函式包含運算式，則異步執行await。該函式在await運算式處異步完成，回傳 Promise（非布林值）。因此，如果回呼函式包含fetch需要await運算式的函式，我們將無法同步執行該回呼函式。
請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function。
我認為替代方案如下。回呼總是取消提交，然后，當您的驗證程序成功時，提交表單。
form.addEventListener('submit', (e) => {
e.preventDefault(); // cancel submission
let signInData = JSON.stringify(Object.fromEntries(new FormData(form).entries()));
fetch('php/sign_up.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: signInData,
})
.then(response => response.text())
.then(data => {
if(data != "1") {
document.getElementById("sign_up_error").innerHTML = data;
} else {
form.submit();
}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/347737.html
標籤：javascript 形式 拿来
上一篇：型別錯誤：_app2.default.database不是函式。（在'_app2.default.database()'中，'_app2.default.database