Fetch APIでエラー時のレスポンスを取得する方法：詳細なハンドリングガイド

async function fetchData(url, options) {
    try {
        const response = await fetch(url, options);
        
        // レスポンスのステータスを確認
        if (!response.ok) {
            // エラーレスポンスの Content-Type を取得
            const contentType = response.headers.get('content-type');
            let errorData;

            if (contentType && contentType.includes('application/json')) {
                // JSON 形式の場合
                errorData = await response.json();
            } else {
                // テキスト形式の場合
                errorData = await response.text();
            }

            // エラーデータを含むエラーをスロー
            throw new Error(JSON.stringify({
                status: response.status,
                statusText: response.statusText,
                data: errorData
            }));
        }

        // レスポンスが正常な場合、データをパースして返す
        const data = await response.json();
        return data;

    } catch (error) {
        // エラーハンドリング
        console.error('Fetch error:', error);

        try {
            // スローされたエラーが JSON 形式の場合、パースする
            const errorObj = JSON.parse(error.message);
            console.log('エラーのステータス:', errorObj.status);
            console.log('エラーのステータステキスト:', errorObj.statusText);
            console.log('エラーデータ:', errorObj.data);
        } catch (e) {
            // エラーメッセージが JSON でない場合
            console.log('エラーメッセージ:', error.message);
        }
    }
}

// 使用例
fetchData('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
});

function fetchData(url, options) {
    return fetch(url, options)
        .then(async (response) => {
            if (!response.ok) {
                const contentType = response.headers.get('content-type');
                let errorData;

                if (contentType && contentType.includes('application/json')) {
                    errorData = await response.json();
                } else {
                    errorData = await response.text();
                }

                // エラーデータを含むオブジェクトを返す
                return Promise.reject({
                    status: response.status,
                    statusText: response.statusText,
                    data: errorData
                });
            }

            // 正常なレスポンスの場合、データを返す
            return response.json();
        })
        .then(data => {
            console.log('データ:', data);
        })
        .catch(error => {
            console.error('Fetch error:', error);
            console.log('エラーのステータス:', error.status);
            console.log('エラーのステータステキスト:', error.statusText);
            console.log('エラーデータ:', error.data);
        });
}

// 使用例
fetchData('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
});