Fetch API における res.ok の重要性を理解する

私はデータの取得に常に Axios の熱心なユーザーでしたが、最近代わりに Fetch API を使用することにしました。調査中に、微妙だが重要な違いを発見したので、共有する価値があると思いました。

このコードのスニペットから始めましょう。何が記録されると思いますか?

try{
   //this returns a 404 error
   const res = await fetch("randomapi....") 
   console.log("successful")
  }catch(err){
   console.log("failed", err)
}

エラー オブジェクトとともに「失敗」がコンソールに記録されると予想したのは、あなただけではありません。私も最近まで同じことを考えていました。しかし、それは Fetch の仕組みではありません!

ここに問題があります。Fetch リクエストが 404 または 500 ステータス コードを受け取ったとしても、エラーはスローされず、catch ブロックはトリガーされません。代わりに、fetch 関数が Promise を解決し、応答が成功したかどうかの確認はユーザーに任せます。

Fetch でエラーを正しく処理するには、次のように res.ok プロパティを明示的にチェックする必要があります。

try{
    //returns 404 error
    const res = await fetch("randomapi")
    if(!res.ok){
      throw new Error("fetch request failed")
    }
    console.log("successful")
    let data = await res.json()
    console.log(data)
}catch(err){
  console.log(err)
}

このアプローチでは、応答ステータスが成功の範囲 (200 ～ 299) の外にある場合、throw ステートメントが実行され、エラーが catch ブロックで捕捉されます。

なぜこれが起こるのですか?

Axios とは異なり、Fetch は 2xx 範囲外の HTTP 応答コードをエラーとはみなしません。代わりに、成功したかどうかにかかわらず、すべての HTTP 応答を約束が履行されたものとして扱います。この設計の選択により、開発者はより詳細に制御できるようになりますが、エラーを正しく処理するには余分な労力も必要になります。

応答を理解しました。わかりました

response.ok プロパティは、200 ～ 299 の HTTP ステータス コードについては true と評価されるブール値です。その他のステータス コードについては、false と評価されます。これにより、フェッチリクエストが成功したかどうかを確認する簡単かつ信頼できる方法になります。

例:

• ステータス 200 は成功を示し、response.ok を true に設定します。
• 404 ステータス (見つからない) または 500 ステータス (サーバー エラー) が設定されます 応答.ok から false へ。

クライアント側のエラー (4xx) とサーバー側のエラー (5xx) を区別するなど、より詳細なエラー処理が必要な場合は、response.status を使用してステータス コードに直接アクセスすることもできます。

読んでいただきありがとうございます。これが誰かの役に立てば幸いです!

以上がFetch API における res.ok の重要性を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。