ReactのAPI GET処理：fetchJsonでJSON取得とエラーを共通化する

export async function fetchJson(
  url: string,
  signal?: AbortSignal,
): Promise<unknown> {
  const response = await fetch(url, {
    method: 'GET',
    headers: { Accept: 'application/json' },
    signal,
  });
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

{ "message": "ReactからJSONを読み込みました" }

import { useState } from 'react';
import { fetchJson } from './api/fetchJson';

export default function App() {
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  async function handleLoad() {
    setLoading(true);
    setError('');
    setMessage('');
    try {
      const data = await fetchJson('/api/message.json');
      if (typeof data !== 'object' || data === null ||
          !('message' in data) || typeof data.message !== 'string') {
        throw new Error('messageの形式が不正です');
      }
      setMessage(data.message);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : '取得に失敗しました');
    } finally {
      setLoading(false);
    }
  }
  return <main>
    <h1>API読み込み</h1>
    <button type="button" onClick={handleLoad} disabled={loading}>
      {loading ? '読み込み中' : '取得する'}
    </button>
    {error && <p role="alert">{error}</p>}
    <p aria-live="polite">{message}</p>
  </main>;
}