使用Fetch API时在通话过程中显示加载旋转器

发布于 2025-01-27 03:20:43 字数 245 浏览 2 评论 0原文

如何创建加载语句在获取时

useEffect(() => {

    fetch('https://hidden-shore-3231.herokuapp.com/allCarsHomePage')
        .then(res => res.json())
        .then(data => {
            setCards(data)
        })


}, [])

原文

how to create loading statement while it's fetching

useEffect(() => {

    fetch('https://hidden-shore-3231.herokuapp.com/allCarsHomePage')
        .then(res => res.json())
        .then(data => {
            setCards(data)
        })


}, [])

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝戈者 2025-02-03 03:20:43

您可以尝试在获取之前直接创建加载旋转器，然后在解决承诺后隐藏 /删除它。

回复收藏 0 原文

拿命拼未来 2025-02-03 03:20:43

添加一个新状态，该状态是布尔值。当端点称为true时，端点被称为“更新该状态”，然后将数据发送并解析时，将状态设置回false。

同时，添加一个单独的返回，该在加载状态为true时显示旋转器。

const { useEffect, useState } = React;

function mockAPI() {
  return new Promise(res => {
    const json = JSON.stringify({"text": "Done!"});
    setTimeout(() => res(json), 3000);
  });
}

function Example() {

  const [ text, setText ] = useState('');
  const [ isLoading, setIsLoading ] = useState(false);

  useEffect(() => {
    function getData() {
      setIsLoading(true);
      mockAPI().then(json => {
        const data = JSON.parse(json);
        setText(data.text);
        setIsLoading(false);
      });
    }
    getData();
  }, []);

  if (isLoading) return 'Spinner';

  return (
    <div>{text}</div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Add a new state that is a boolean. When the endpoint is called update that state with true, and then when the data has been sent, and parsed, set the state back to false.

Meanwhile add a separate return that shows the spinner if the loading state is true.

const { useEffect, useState } = React;

function mockAPI() {
  return new Promise(res => {
    const json = JSON.stringify({"text": "Done!"});
    setTimeout(() => res(json), 3000);
  });
}

function Example() {

  const [ text, setText ] = useState('');
  const [ isLoading, setIsLoading ] = useState(false);

  useEffect(() => {
    function getData() {
      setIsLoading(true);
      mockAPI().then(json => {
        const data = JSON.parse(json);
        setText(data.text);
        setIsLoading(false);
      });
    }
    getData();
  }, []);

  if (isLoading) return 'Spinner';

  return (
    <div>{text}</div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

回复收藏 0 原文

~没有更多了~