Kаким лучшим способом обрабатывать error ,loading и ответить из сервера?

Question

[Durin Qurkingo]

каким лучшим способом обрабатывать error ,loading и ответить из сервера.

я делаю обработку вот таким способом.

const [resp, setRes] = useState();
const [err, setErr] = useState("");

useEffect(() => {
  (async () => {
    try {
      const Res = await fetch(...);
      const Num = await res.json();
      if(Num){throw new Error();} //проверка
      setRes(Num);
    } catch () {
      setErr("error");
    }
  })();
}, []);

if (err !== "") {
  return <div>{err}</div>;;
} else if (Num === undefined ) {
  return <div>{'...загрузка'}</div>;
}
return (
  <div>
      <You resp={resp} />
  </div>
);

Я не уверен что мой способ лучше.в моём коде есть какие-нибудь изъяны которые я не увидел.Можете ли показать лучшие способы обработки

Answer 1

[Антон Спирин]

Логику можно вынести в собственный хук. Как-то так:

const useFetch = (url, options) => {

  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const res = await fetch(url, options);
      const json = await res.json();
      setData(json);
      setIsLoading(false);
    } catch (error) {
      setError(error);
      setIsLoading(false);
    }
  };  

  useEffect(() => {
    fetchData();
  });

  return [
    data,
    isLoading,
    error,
    fetchData,
  ];
};

const Example = ({ slug }) => {
  const [ product, isLoading, error, fetchFn ] = useFetch(`/api/product/${slug}`);
  
  if (isLoading) return <Preloader />;

  if (error) return <Error error={error} tryAgainFn={fetchFn} />;

  if (!product) return <NotFound />;
  
  return <Product product={product} />
};