JavaScriptにおけるAJAXエラーの完全なインターセプト

fetchが返すPromiseは、 ネットワークエラーが発生した場合にのみ エラーで拒否されます。サーバーが 404 や 500 のような ステータスで応答した場合、 Promiseは成功として解決されますが、 ステータス ok は false に設定されます。

両方のタイプのエラーをインターセプトしましょう:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        console.log('不正な応答ステータス');
        return '';
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});

HTTP応答ステータスが不正な場合のエラーも catch ブロックで捕捉されるようにします。 そのためには、throw を通じて エラーを次に伝播させます:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error('不正な応答ステータス');
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});