发布表单数据时的 Fetch-api 错误处理

Question

我正在尝试构建一个ReactJs 表单组件（以TypeScript 编写目标ES6），我将用于我的网络应用程序中的所有表单。 为了在发布表单时处理错误，我需要检查是否有错误。

这是我的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));
}

我目前正在处理的操作是一个简单的 POST 操作（示例）：

[HttpPost]
[AllowAnonymous]
public async Task<ActionResult> Login(RequestAccountLoginPost request)
{
    throw new ApplicationException("The application crashed in a way nobody expected. Sorry about that...");
}

但是，在提交表单时，我总是以 ASP.net 标准错误页面结束。 我如何才能停止这种行为并留在表单所在的页面上显示一些错误，例如There was an internal server-error. Write an e-mail to help@me.please 可以帮助用户识别出问题了吗？

稍后我想在服务器端验证失败（但客户端没有）的情况下实现一些处理，以便向用户显示：Look. This value is wrong. Please fix.。因此，我确实需要保持在同一页面上。

我刚开始使用 fetch-api。也许这不是最好的选择？

Answer 1

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

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

来自 MDN：Event 接口的 preventDefault() 方法告诉用户 代理，如果事件没有得到明确处理，它的默认值 不应像往常那样采取行动。