reactjs - 处理 useEffect 中的 fetch api 错误并设置错误

Question

我有useEffect一个从 api 获取数据的组件。

我想处理两种类型的错误-

1. Api 不可用（说服务器已关闭）
2. 发出的请求无效（对错误端点的请求）

并且，setError在发生任何这些错误时调用。

我就是这样解决的-

const [error, setError] = useState(null)

useEffect(() => {
    const fetchModels = async () => {
        let res
        try {
            res = await fetch('http://localhost:8000/api/models/')
        }
        catch (e) {
            if (e instanceof (TypeError)) {
                setError('Could not fetch data. Please try again')
                return
            }
        }

        if (!res.ok) {
            setError('Could not fetch data. Please try again')
            return
        }

        const data = await res.json()
        setModels(data)
        setError(null)
    }
    fetchModels()
}, [])

尽管这行得通，但我真的相信一定有更好的方法来完成我想要完成的事情。

标签： reactjsfetch-api