[勉強用] React hooksで非同期処理を書く (ステップ4)

はじめに

前ステップから続き、勉強用のuseFetchを書いていきます。今回のテーマはエラー処理です。

課題

これまではURLが固定でしたが、URLを変えた場合エラーになる可能性があります。また、URLを変えなくてもネットワークエラーは起こり得ます。エラー処理を追加して、エラー時にその旨を表示するなどできるようにします。

ステップ4: error処理

const useFetch = url => {
  const [result, setResult] = useState({});
  useEffect(() => {
    let cleanedUp = false;
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`status: ${response.status}`);
        const data = await response.json();
        if (!cleanedUp) {
          setResult({ data });
        }
      } catch (error) {
        if (!cleanedUp) {
          setResult({ error });
        }
      }
    };
    setResult({ loading: true });
    fetchData();
    const cleanup = () => {
      cleanedUp = true;
    };
    return cleanup;
  }, [url]);
  return result;
};

少し複雑になってきました。try-catchでエラーを取得するとともに response.ok もチェックしてエラー扱いにしています。

動作確認

実際に動くコードはこちらです。codesandbox

おわりに

本コードは勉強用ですので、そのままでは使わないでください。(ちゃんとした実装はこちら)
さらなる課題と解決は次のステップへ。