如何在useEffect中优雅处理Fetch API错误并调用setError？

现有实现已经覆盖了两类核心错误场景，但存在几个可优化的点：

• 错误处理逻辑分散，两处setError调用重复
• 未处理res.json()解析失败的异常场景
• 未处理组件卸载时未完成请求导致的内存泄漏、状态更新警告
• 不需要单独限定仅处理TypeError，可能遗漏其他异常场景

const [error, setError] = useState(null)
const [models, setModels] = useState([])

useEffect(() => {
    // 初始化中断控制器，用于取消未完成的请求
    const controller = new AbortController()

    const fetchModels = async () => {
        try {
            const res = await fetch('http://localhost:8000/api/models/', {
                signal: controller.signal
            })
            // 处理请求成功但状态码非2xx的场景
            if (!res.ok) throw new Error('Request failed with status ' + res.status)
            
            const data = await res.json()
            setModels(data)
            setError(null)
        } catch (e) {
            // 忽略请求主动中断的错误
            if (e.name !== 'AbortError') {
                setError('Could not fetch data. Please try again')
            }
        }
    }

    fetchModels()

    // 组件卸载时清理请求
    return () => controller.abort()
}, [])

• 统一错误处理：把请求发送、状态校验、JSON解析所有可能抛出异常的逻辑都收拢到try块内，任意环节出错都会进入catch统一处理，避免重复代码，也覆盖了返回值非合法JSON的边缘场景。
• 请求中断逻辑：新增AbortController绑定到fetch请求，组件卸载时会主动中断未完成的请求，避免组件销毁后还执行状态更新导致的React警告和内存泄漏。
• 异常过滤：主动跳过请求中断抛出的AbortError，避免用户主动离开页面时触发不必要的错误提示。
• 可扩展的错误分类：如果需要给用户更明确的错误提示，可以在catch中根据错误类型、响应状态码做细分，比如404错误提示请求的资源不存在，500错误提示服务端暂时不可用等。

内容的提问来源于stack exchange，提问作者Aniket Banyal