Fetch Promise でエラーをキャッチする方法: 条件付き拒否が機能しないのはなぜですか?

Fetch Promises によるエラーのキャッチ: 条件付き拒否

Redux アプリケーションでは、開発者は非同期リクエストにフェッチを使用することがよくあります。ただし、リクエストが失敗したときのエラーの処理は、特にリクエストが OK 以外のステータス コードを返した場合には困難になる可能性があります。

次のコード スニペットを考えてみましょう。

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;
}

目標は拒否することです。 Promise を実行し、ステータス コードが OK でない場合はリデューサーでエラーをキャッチします。ただし、コードは意図したとおりに動作しません。Promise は拒否されません。

Fetch Promises について

ネットワーク エラーが発生した場合、Fetch Promise は TypeError でのみ拒否されます。 。 4xx または 5xx ステータス コードを持つ応答はネットワーク エラーとは見なされないため、エラーはスローされません。

カスタム エラーのスロー

これらの非ネットワーク エラーを捕捉するには、ステータス コードがリクエストの失敗を示している場合は、手動でエラーをスローできます。

function fetchVehicle(id) {
  return fetch(`http://swapi.co/api/vehicles/${id}/`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      return response.json();
    })
    .catch(error => {
      console.log(error);
    });
}

ここで、リクエストがOK 以外のステータス コードを返すと、エラー ハンドラーがトリガーされ、エラー メッセージが記録されます。これにより、リデューサーはこのエラーを適切に処理できるようになります。

以上がFetch Promise でエラーをキャッチする方法: 条件付き拒否が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。