如何使用 React.Suspense 调用 api？

Question

我已经阅读了关于 React.Suspense 的文档，看起来很棒，但是我如何在执行 api 调用时使用它，例如使用 axios？

更具体地说，为什么这段代码不起作用？

export default function Foo(){
const [state, setState] = useState()

useEffect(()=> {
    axios.get("url")
    .then(res=> setState(res.data))
    .catch(_=> setState(null)
}, [])

return (
    <Suspense fallback="loading data">
       <div>hello {state.name}</div>
    </Suspense>
)
}

谢谢！

Answer 1

Suspense用于异步加载Components，不是API。它用于延迟加载使用 React.lazy.

导入的组件

即使您设法呈现您的组件，它也不会对您的情况产生任何影响。您将需要它用于不同的用例

Answer 2

根据 React 文档，您尝试实现的目标是可能的。有一个名为并发模式的实验性功能。您可以在 React 文档中找到实现细节。 Link 到 Suspense 文档：https://reactjs.org/docs/concurrent-mode-suspense.html

但是有一个限制，您必须使用利用此功能的 npm 包。 React 团队建议使用 Relay。

这是文档本身提供的代码沙箱 link。

https://codesandbox.io/s/frosty-hermann-bztrp

如何使用 React.Suspense 调用 api？

How to use React.Suspense with a api call?

reactjs

axios

react-suspense