自定义hook实现数据请求逻辑

封装之前考虑一下？

1. 这个功能需要传入什么数据？
2. 这个功能需要返回什么数据？

主要功能

这个自定义hook的主要功能是封装数据请求逻辑，使得组件可以更加简洁、方便地进行数据获取。它处理了数据请求的发起、响应的处理以及加载状态的更新等一系列操作，让组件只需关注数据的使用，而无需关心具体的请求细节。

传入的数据：

url：请求的目标URL。
options：可选的请求配置对象，可以包含请求头、请求方法等信息。

暴露出来的数据：

data：从服务器获取的数据，类型为any，表示可以是任何数据类型。
loading：一个布尔值，表示是否正在加载数据。当请求正在进行时，其值为true；当请求完成或出错时，其值为false。
error：在请求过程中可能出现的错误，如果有错误则返回错误信息，否则为null。

下面是 useFetchData 的一个简单实现，使用了React的 useState 和 useEffect，以及 fetch API 来发起网络请求：

import { useState, useEffect } from 'react';  
  
function useFetchData(url, options) {  
  const [data, setData] = useState(null);  
  const [loading, setLoading] = useState(true);  
  const [error, setError] = useState(null);  
  
  useEffect(() => {  
    let didCancel = false;  
  
    const fetchData = async () => {  
      try {  
        setLoading(true);  
        const response = await fetch(url, options);  
        if (!response.ok) {  
          throw new Error(`HTTP error! status: ${response.status}`);  
        }  
        const responseData = await response.json();  
        if (!didCancel) {  
          setData(responseData);  
        }  
      } catch (error) {  
        if (!didCancel) {  
          setError(error);  
        }  
      } finally {  
        if (!didCancel) {  
          setLoading(false);  
        }  
      }  
    };  
  
    fetchData();  
  
    return () => {  
      didCancel = true;  
    };  
  }, [url, options]); // 依赖项数组，当url或options变化时重新发起请求  
  
  return { data, loading, error };  
}  
  
export default useFetchData;

在这个自定义hook中：

useState用于管理数据状态：data（获取到的数据），loading（数据加载状态），error（请求过程中的错误信息）。
useEffect用于在组件挂载后发起数据请求，并在组件卸载时取消可能还在进行的请求。
fetchData是一个异步函数，它执行实际的fetch请求，并处理响应。如果请求成功，它会更新data状态；如果请求失败，它会更新error状态。
清理函数在组件卸载时执行，设置didCancel标志，以防止在组件卸载后更新状态。

使用示例：

在组件中，可以这样使用这个自定义hook：

import React, { useEffect } from 'react';  
import useCustomFetch from './useCustomFetch';  
  
function MyComponent() {  
  const { data, loading, error } = useCustomFetch('https://api.example.com/data', { method: 'GET' });  
  if (loading) {  
    return <div>Loading...</div>;  
  }  
  if (error) {  
    return <div>Error: {error.message}</div>;  
  }  
  
  return (  
    <div>  
      {/* 使用获取到的数据 */}  
      {JSON.stringify(data)}  
    </div>  
  );  
}