フェッチ対axiosのエラー処理

取得とaxiosの間にはあまり違いがありますが、私の焦点はエラー処理についてです.なぜなら、それは以前のプロジェクトで私の注意を引いたからです.
エラー処理は、私たちがビルドするあらゆるアプリケーションの重要な部分です.
フェッチドキュメントからthe difference between Fetch and JQuery , どのようにフェッチがエラーを処理するかを示しますが、チュートリアルがそれについて話していないので、誰もが知っているとは思いません.

問題
なぜFETCHがリクエストの失敗を処理するのかについては理由があると思いますが、たいていのDEVSは通常、結果を処理するのを忘れています.
からdocs :
「約束はfetch() レスポンスがHTTP 404または500であってもHTTPエラーステータスを拒否しません.代わりに、ok ステータスfalse ), そして、それはネットワーク故障で拒絶するでしょう、あるいは、何かが要求が完了するのを防いだならば."
しかし、これは問題であるかもしれません、例えば、フォームで、間違ったデータがサーバーに送られるとき、我々は失敗しようとします.成功応答があるならば、私たちはユーザをリダイレクトしたり、データを格納したりします.

解決策
Axiosでは、リクエストの失敗があった場合、エラーをスローし、try-catch をブロックし、エラーデータを取得するerror.response.data .
もしフェッチしたら、

const res = await fetch(api);
const data = await res.json();

そして、結果を扱うことができます

if (!res.ok) {
  error = data;
  return null;
}

return data; // Do something with data if successful

結論
私の例のコードをチェックすることができますgist またはcodepen FETCHとAxiosのエラー処理の説明
カバー写真Markus Spiske on Unsplash