Hook リクエストフック (useFetch) をカプセル化し、シグナルを使用してフェッチの副作用を排除します。

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 }
      }