ステータス コードが OK でない場合に Fetch Promise を拒否し、エラーをキャッチする方法

ステータスが OK でない場合に Fetch Promise を拒否し、エラーをキャッチする方法?

多くの最新の JavaScript アプリケーションは、Fetch API を使用して HTTP リクエストを作成します。 Fetch API は、Response オブジェクトに解決される Promise オブジェクトを返します。 Response オブジェクトを使用すると、ステータス コード、ヘッダー、および応答の本文にアクセスできます。

場合によっては、サーバーがエラーを示す HTTP ステータス コードで応答することがあります。たとえば、要求されたリソースが見つからない場合、サーバーは 404 ステータス コードで応答する可能性があります。デフォルトでは、サーバーが 2xx 以外のステータス コードで応答した場合、Fetch Promise は拒否されません。

これにより、コード内のエラーの処理が困難になる可能性があります。この問題を解決するには、Promise を解決または拒否する前に、status() 関数を使用して Response オブジェクトのステータス コードを確認します。以下は、ステータス コードが OK でない場合に、status() 関数を使用して Fetch Promise を拒否する方法の例です。

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())            
                .catch(error => {
                    throw(error);
                })
            });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}

このコードは、Response オブジェクトのステータス コードが次の場合に Fetch Promise を拒否します。大丈夫ではありません。その後、.catch() メソッドを使用してエラーを処理できます。

次に、.catch() メソッドを使用してエラーを処理する方法の例を示します。

fetchVehicle(1).catch(error => {
    console.log(error);
});

これコードはエラーをコンソールに記録します。

以上がステータス コードが OK でない場合に Fetch Promise を拒否し、エラーをキャッチする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。