如何使用一个引导加载微调器，同时从外部api获取数据?

Question

从url获取信息需要很长时间，我如何利用bootstrap加载旋转器来隐藏延迟，使网站看起来更具交互性?

Answer 1

我更喜欢有一个单一的状态，存储有关请求的所有信息，即它的status,data&error.

基于status字段，您可以呈现适当的UI(如加载旋转器，错误屏幕)。

我在下面的例子中使用了状态钩子，如果你愿意，你也可以使用reducer钩子

function App(props) {
const [{ status, data, error }, setState] = React.useState({
status: "PENDING",
data: null,
error: null
});
React.useEffect(() => {
let isCancelled = false;
setState({ status: "PENDING", data: null, error: null });
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(data => {
if (isCancelled) {
return;
}
setState({ status: "RESOLVED", data, error: null });
})
.catch((error) => setState({ status: "REJECTED", error, data: null }));
return () => {
isCancelled = true;
};
}, []);
if (status === "PENDING") {
return <p>Loading...</p>;
} else if (status === "REJECTED") {
return <pre>{JSON.stringify(error)}</pre>;
} else {
return <pre>{JSON.stringify(data)}</pre>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

const [loading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
// Do your Fetch and stuff
setLoading(false)

}, [])