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

каким лучшим способом обрабатывать 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>
);


Я не уверен что мой способ лучше.в моём коде есть какие-нибудь изъяны которые я не увидел.Можете ли показать лучшие способы обработки
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Логику можно вынести в собственный хук. Как-то так:
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} />
};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы