抛出错误消息没有被catch方法捕获

html5 • • 问答

我正在关注有关处理 YouTube 上获取错误的反应教程。我完全按照教员的做法做了，但由于某种原因，catch 方法没有捕获 throw 错误消息。这是代码：

const Home = () => {
  const [blogs, setBlogs] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      fetch("http://localhost:8000/blogs")
        .then((res) => {
          if (!res.ok) {
            throw Error("This error is not getting caught");
          }
          return res.json();
        })
        .then((data) => {
          setBlogs(data);
          setIsPending(false);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, []);

  return (
    <div className="home">
      {error && <div>{error} </div>}
      {isPending && <div>Loading...</div>}
      {blogs && <BlogList blogs={blogs} title="All Blogs!" />}
    </div>
  );
};

export default Home;

注意：服务器没有运行。

回答

第一个.thenfromfetch将在收到响应头时输入。响应标头可能表明存在问题 - 如果响应不是.ok- 在这种情况下，您throw Error将根据需要进入并将控制流向下发送到较低的.catch.

但是如果根本没有收到响应头，第一个.then将不会被输入 - 相反，网络错误会导致拒绝，.catch下面将直接输入。

您的代码导致Failed to fetch显示，因为这是来自失败请求的错误消息，甚至没有返回任何标头：

const { useState, useEffect } = React;
const Home = () => {
  const [blogs, setBlogs] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      fetch("http://localhost:8000/blogs")
        .then((res) => {
          if (!res.ok) {
            throw Error("This error is not getting caught");
          }
          return res.json();
        })
        .then((data) => {
          setBlogs(data);
          setIsPending(false);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, []);

  return (
    <div className="home">
      {error && <div>{error} </div>}
      {isPending && <div>Loading...</div>}
      {blogs && <BlogList blogs={blogs} title="All Blogs!" />}
    </div>
  );
};

ReactDOM.render(<Home />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

如果您也想This error is not getting caught在这种情况下显示，请更改

setError(err.message);

到

setError('This error is not getting caught');

以上是抛出错误消息没有被catch方法捕获的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>