代码题: 实现 ahooks 中的 useRequest 函数, 内部可以使用 axios 或者 fetch

useRequest 是一个常用的自定义 Hook，用于处理数据请求。它可以简化组件中的请求逻辑，使组件更纯净并重用请求逻辑。

以下是一个简单的 useRequest 的实现，使用 fetch:

import { useState, useEffect } from 'react';

function useRequest(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // fetch 请求
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]); // useEffect 依赖于 url，当 url 改变时，会重新发起请求

  return { data, error, loading };
}

export default useRequest;

// 使用这个 hook 的组件
const App = () => {
  const { data, error, loading } = useRequest('/service/data');
  
  if (loading) {
    return <Loading loading={loading} />;
  } else if (error) {
    return <Error error={error} />;
  } else {
    return <Data data={data} />;
  }
};

如果你想使用 axios 而不是 fetch，只需简单地替换 fetch 的部分即可。