1. 封装函数

import { useEffect, useState ] from "react"
export function useFetch(url) {
    const [loading，setLoading] = useState(true);
    const [data, setData] = useState();
    const [error， setError] = useState()

    useEffect(() => {
        setLoading(true);
        fetch(url)
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false));
        }, [url]);
    return { loading, data, error }
}

        进行很简单的封装。

1. 进阶

   1. 但是这样会产生一个问题，当我们进行路由跳转和消耗页面时，如果终止方法的进行呢。
   2. 可以使用fetch的signal，和useEffect的return，完整代码如下：

      import { useEffect, useState ] from "react"
      export function useFetch(url) {
          const [loading，setLoading] = useState(true);
          const [data, setData] = useState();
          const [error， setError] = useState()
      
          useEffect(() => {
              const controller = new AbortController();
              setLoading(true);
              fetch(url, { signal: controller.signal })
                  .then(setData)
                  .catch(setError)
                  .finally(() => setLoading(false));
      
              return () => {
                  controller.abort();
              }
         }, [url]);
          return { loading, data, error }
      }