解决 React 表单提交失败：告别“fetch aborted”

javascript

2024-03-06 09:26:04

解决 React 表单提交失败：告别“fetch aborted”

作为一名经验丰富的程序员和技术作家，我经常遇到 React 表单提交失败的情况，而“fetch aborted”错误尤为常见。为了帮助他人解决此问题，我将分享我学到的方法，并提供一个示例应用程序来说明解决方案。

问题：为什么我的 React 表单提交失败？

当在 React 中提交表单时，遇到“fetch aborted”错误通常表明网络请求在表单提交过程中被中止。这可能是由以下原因造成的：

不稳定的网络连接： 如果网络连接不稳定或断开，请求可能会失败。
服务器端问题： 服务器可能正在出现问题，或者你正在尝试连接到不正确的端点。
fetch() 超时： 如果 fetch() 请求的超时时间太短，请求可能会在完成之前中止。
组件卸载： 当组件在请求仍在进行时卸载时，请求将自动中止。

解决方案：如何解决“fetch aborted”错误？

解决 React 表单提交失败并消除“fetch aborted”错误的步骤如下：

检查网络连接： 确保设备连接到稳定可靠的网络。
检查服务器端： 验证服务器正在运行并可以接收请求。
调整 fetch() 超时： 增加 fetch() 请求的超时时间，为请求完成提供更多时间。
使用 AbortController： 使用 AbortController 优雅地中止请求，当组件卸载时自动中止。

示例应用程序：使用 AbortController 优雅地中止请求

为了演示使用 AbortController 解决“fetch aborted”错误，这里提供了一个示例 React 应用程序：

import { useState, useEffect } from "react";

const Create = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState({
    title: '',
    body: '',
    author: ''
  });

  useEffect(() => {
    const abortCont = new AbortController();

    const handleSubmit = (e) => {
      e.preventDefault();
      setIsLoading(true);

      const blog = formData;
      const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(blog),
        signal: abortCont.signal
      };

      fetch("http://localhost:8000/blogs", requestOptions)
        .then(() => {
          console.log("New blog added");
          setIsLoading(false);
        })
        .catch((err) => {
          if (err.name === "AbortError") {
            console.log("Fetch aborted");
          } else {
            console.log(err.message);
            setIsLoading(false);
          }
        })
    };

    // Abort the fetch when the component unmounts
    return () => abortCont.abort();
  }, []);

  return (
    <div>
      <h2>Add a New Blog</h2>

      <form onSubmit={ handleSubmit }>
        <input type="text" placeholder="Title" value={ formData.title } onChange={(e) => setFormData({...formData, title: e.target.value})} />
        <textarea placeholder="Body" value={ formData.body } onChange={(e) => setFormData({...formData, body: e.target.value})}></textarea>
        <select value={ formData.author } onChange={(e) => setFormData({...formData, author: e.target.value})}>
          <option value="Mario">Mario</option>
          <option value="Luigi">Luigi</option>
        </select>
        <button type="submit">Add Blog</button>
      </form>
    </div>
  );
}

export default Create;

在这个示例中，我们使用 AbortController 来管理 fetch() 请求的生命周期。当组件卸载或请求被取消时，AbortController 将优雅地中止请求，避免“fetch aborted”错误。

结论

通过遵循本文中概述的步骤，你可以有效地解决 React 表单提交失败问题，并防止“fetch aborted”错误的出现。记住检查网络连接、调整超时并使用 AbortController，你将能够确保表单正常提交，并避免网络请求中止的麻烦。

常见问题解答

为什么 fetch() 请求会被中止？
fetch() 请求可能会因不稳定的网络连接、服务器端问题、请求超时或组件卸载等原因而中止。
AbortController 如何帮助防止“fetch aborted”错误？
AbortController 提供了一种优雅的方式来中止请求，即使在组件卸载后也是如此，从而防止“fetch aborted”错误的出现。
是否可以在 fetch() 请求中设置自定义超时时间？
是的，可以通过在 fetch() 请求的选项对象中指定超时属性来设置自定义超时时间。
在使用 AbortController 时需要注意什么？
使用 AbortController 时，需要注意在组件卸载时调用 abort() 方法，以便优雅地中止请求。
除了 AbortController 之外，还有其他方法可以防止“fetch aborted”错误吗？
其他方法包括重试请求、使用持久化技术或管理网络连接状态。