Javascript 过帐表单数据时获取api错误处理

我正在尝试构建一个

ReactJs

表单组件（使用

TypeScript

targeting

ES6

），我将在web应用程序中的所有表单中使用它。 为了在发布表单时处理错误，我需要检查是否存在任何错误

这是我的

handleSubmit

方法：

private handleSubmit = (ev: React.FormEvent<HTMLFormElement>): void => {
    var theForm = ev.target as HTMLFormElement;

    const formData = new FormData(theForm);

    fetch(theForm.action, { method: theForm.method, body: formData })
        .then(response => {
            if (!response.ok)
                throw Error(response.statusText);

            return response;
        })
        .catch(reason => console.log(reason));
}

private handleSubmit=（ev:React.FormEvent）：void=>{
var theForm=ev.target作为HTMLFormElement；
const formData=新的formData（格式）；
fetch（theForm.action，{method:theForm.method，body:formData}）
。然后（响应=>{
如果（！response.ok）
抛出错误（response.statusText）；
返回响应；
})
.catch（reason=>console.log（reason））；
}

我目前正在执行的操作是一个简单的后期操作（示例）：

[HttpPost]
[异名]
公共异步任务登录（RequestAccountLoginPost请求）
{
抛出新的ApplicationException（“应用程序以无人预料的方式崩溃。对此感到抱歉…”）；
}

但是，在提交表单时，我总是以ASP.net标准错误页结束。 如何停止此行为并保持在页面上表单显示一些错误，例如，

出现内部服务器错误。写一封电子邮件给help@me.please

这有助于用户识别出问题所在

稍后我想实现一些处理，以防服务器端验证失败（但客户端没有），这样我就可以向用户显示：

Look。这个值是错误的。请修复。

。因此，我确实需要保持一致

---

我不熟悉使用fetchapi。也许这不是最好的选择？

您需要阻止表单的正常提交，并在JS中处理所有内容，否则您的页面将默认将数据发布到服务器

private handleSubmit = (ev: React.FormEvent<HTMLFormElement>): void => {
    var theForm = ev.target as HTMLFormElement;
    ev.preventDefault()
// ... your code

private handleSubmit=（ev:React.FormEvent）：void=>{
var theForm=ev.target作为HTMLFormElement；
ev.preventDefault（）
//…您的代码

来自MDN：事件接口的

preventDefault（）

方法告诉用户 代理，如果事件未得到显式处理，则默认 不应像通常那样采取行动

---

您需要阻止表单的正常提交并在JS中处理所有内容，否则您的页面将在默认情况下将数据发布到服务器

private handleSubmit = (ev: React.FormEvent<HTMLFormElement>): void => {
    var theForm = ev.target as HTMLFormElement;
    ev.preventDefault()
// ... your code

private handleSubmit=（ev:React.FormEvent）：void=>{
var theForm=ev.target作为HTMLFormElement；
ev.preventDefault（）
//…您的代码

来自MDN：事件接口的

preventDefault（）

方法告诉用户 代理，如果事件未得到显式处理，则默认 不应像通常那样采取行动

我完全错过了这个（因为方法调用在

handleSubmit

中），所以我甚至没有考虑原始事件。谢谢。我花了很多时间才发现…；）我完全错过了这个（因为方法调用在

handleSubmit

中）所以我甚至没有想到最初的活动。谢谢。我会花很多时间去发现…；）