Redux および redux-promise-middleware のフェッチで非 OK ステータス コードを処理する方法は?

フェッチ: 拒否とエラー キャッチによる非 OK ステータス コードの処理

提供されたコードは Redux 内の 'whatwg-fetch' ポリフィルを利用しますデータ取得用の redux-promise-middleware です。ただし、Fetch Promise は通常、ネットワーク エラーでのみ拒否するため、問題は非 OK ステータス コード (4xx および 5xx) の処理にあります。

拒否処理

OK 以外のステータス コードに対するカスタム エラー メッセージで Promise を拒否する場合は、次のアプローチを検討してください:

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(res => res.json())
                .then(data => {
                    if (!res.ok) {
                        throw new Error(`Non-OK status code: ${res.status}`);
                    }
                    return data;
                })
                .catch(error => {
                    throw error;
                })
        });
    };
}

エラー キャッチ

アクション クリエーター内で、エラーは、応答ステータスが非 OK の場合にスローされます。このエラーは、リデューサーでアクションを処理するときに捕捉できます。

サンプル リデューサー:

case 'FETCH_VEHICLE': {
    return {
        ...state,
        isLoading: true,
    };
}
case 'FETCH_VEHICLE_FULFILLED': {
    return {
        ...state,
        isLoading: false,
        vehicle: action.payload,
    };
}
case 'FETCH_VEHICLE_REJECTED': {
    return {
        ...state,
        isLoading: false,
        error: action.payload,
    };
}

この更新されたコードでは、「FETCH_VEHICLE_REJECTED」アクションのペイロードに、アクション クリエーターで作成されたエラー メッセージが含まれます。これにより、アプリケーション内で適切なエラー処理と表示が可能になります。

以上がRedux および redux-promise-middleware のフェッチで非 OK ステータス コードを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。