HTTP ステータス コードに基づいてフェッチ プロミスを手動で拒否するにはどうすればよいですか?

Fetch: HTTP ステータス コードに基づいた Promise 拒否の制御

フェッチの領域では、通常、Promise はネットワーク エラーが発生した場合にのみ拒否されます。ただし、4xx または 5xx HTTP ステータス コードが返されるシナリオでは、Promise はデフォルトでは拒否されません。

問題:
提供されたコードで、次のことを試みています。 HTTP 応答ステータスがエラーを示している場合、Promise をインターセプトして拒否します。ただし、Promise は期待どおりに拒否されません。

理由:
ネットワーク エラーが発生した場合、Promise のフェッチは TypeError でのみ拒否されます。 4xx および 5xx 応答はネットワーク エラーではないため、キャッチできるものは何もありません。 Promise を手動で拒否するには、自分でエラーをスローする必要があります。

解決策:
この問題を解決し、HTTP ステータスに基づいて Promise を拒否するには、次のようなコード:

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(res => {
                    if (!res.ok) {
                        const error = new Error('HTTP Error: ' + res.status);
                        throw error; // Throwing the error here will cause fetch to reject the promise
                    }
                    return res;
                })
                .then(res => res.json())
                .catch(error => {
                    throw error;
                })
            });
    };
}

フェッチ Promise 内にエラー処理ロジックを導入することで、HTTP 応答ステータスが次のことを示している場合に Promise を手動で拒否できるようになりました。不成功状態。これにより、redux ミドルウェアの catch ブロックでエラーを適切にキャプチャして処理できるようになります。

以上がHTTP ステータス コードに基づいてフェッチ プロミスを手動で拒否するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。