fetchのエラー処理について

Question

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

上記ではresponse.okで成功を判定し、さらにその下でエラー時の処理を記述しています
しかし、最下部でcatch(function(error){...}という処理も記述されており、これらのエラー処理の違いがわかりません
エラー時の処理は全く同様に見受けられたのですが、何か違いがあるのでしょうか？

たとえば下記のような記述でも処理は同様でしょうか？

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: Network response was not ok.;
});

Answer 1

responseをチェックして、okじゃなかった場合に生成している例外を見ることで「レスポンスがOKじゃない」事がわかるようにするためのチェックです。
この場合は、少なくとも（アドレス間違えるなどとんでもないミスをしてない限り）相手サーバーには通信ができていることはわかります。

そこまで至る前にエラーになってた（ネットワークに繋がってないとか切れたとか宛先不明とか）の場合は、別の例外がcatchに流れます。

Comments

[退会済みユーザー]

ありがとうございます
つまり、catchのエラー時はresponse.okにも必ずならないので、包括的なエラーを判定したい場合はresponse.okだけを見ても問題ないですね

[gentaro]

逆じゃないですか？renposne.okを見なくても、response.blob()の実行でデータが取得できない場合にちゃんと例外が発生してくれれば、catchには流れるので。
それが良いのか悪いのかは、プログラムの仕様次第なので第三者にはどっちが良いとか言えませんが。

一般論として、例外を含むエラー処理をちゃんとしていない、つまり自動でリトライしたり、ネットワークの接続を確認させて再度処理を行うように促すなど、あらかじめ想定できるエラーの種類別の対策を行っていないプログラムは「品質が良くない」とは言われると思いますが。（業務レベルの話です）

[退会済みユーザー]

仮に404であってもfetchメソッドは例外をスローしないとの事なので、renposne.okが網羅的ではないでしょうか？

[gentaro]

404もそうですけど「レスポンスが帰ってきて中身が望ましくない結果」だった場合にどうしたいのか？という問題です。
最初のコードでは、その場合に一応わかる程度のメッセージ（Network response was not ok.）を含んだ例外を意図的に投げることで、一応ケアされてますよね。（コンソール出力を見れば少なくともokじゃなかった事ぐらいはわかる）
response.okじゃない場合にresponse.blob()を実行した結果が自分の思い通りになっている（例外が発生するなど）のであれば必要ないでしょうけど、多分そうならないでしょうね。（空のデータが返されると思います。）